如何根据 Angular js 中前一行中的相同组合框过滤由 Ng-Repeat 创建的组合框？

Question

我有一个 select 元素，当单击“Addbutton”时，ng-repeat 指令会重复该元素。填充 select 元素的对象具有如下格式：

{ id: 1, Title: 'AAA', priority: 1 },

我希望用户 select 从此组合框中选择一个选项并单击“添加按钮”，在下一行中，只有 优先级 大于 前一个 selected 项目优先级 的选项才会被列出并显示。

这是我的代码：

    <!DOCTYPE html>
<html ng-app="mainApplication">
<head>
    <title></title>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

    <script>
        var MainApplication = angular.module('mainApplication', []);
        MainApplication.controller('mainController', ['$scope', function ($scope)
        {
            $scope.AddressPrefix = [
                                { id: 1, Title: 'AAA', priority: 1 },
                                { id: 1, Title: 'BBB', priority: 2 },
                                { id: 1, Title: 'CCC', priority: 3 },
                                { id: 1, Title: 'DDD', priority: 4 },
                                { id: 1, Title: 'EEE', priority: 5 },
                                { id: 1, Title: 'FFF', priority: 6 },
                                { id: 1, Title: 'GGG', priority: 7 },
                                { id: 1, Title: 'HHH', priority: 8 },
                                { id: 1, Title: 'III', priority: 2 },
                                { id: 1, Title: 'jjj', priority: 2 },
                                { id: 1, Title: 'kkk', priority: 2 },
                                { id: 1, Title: 'LLL', priority: 10 },
                                { id: 1, Title: 'MMM', priority: 9 },
                                { id: 1, Title: 'ooo', priority: 7 },
                                { id: 1, Title: 'PPP', priority: 12 },
                                { id: 1, Title: 'qqq', priority: 3 },
                                { id: 1, Title: 'RRR', priority: 13 },
                                { id: 1, Title: 'zzz', priority: 14 },

                                    ];

            $scope.AddressControls = [{ id: 1 }];
            $scope.btnAddressAdd_click = function () {
                var newItemNo = $scope.AddressControls.length + 1
                $scope.AddressControls.push({ 'id': newItemNo });
            };
            $scope.btnAddressRemove_click = function () {
                var lastItem = $scope.AddressControls.length - 1
                $scope.AddressControls.splice(lastItem);
            };
        }]);
    </script>

</head>
<body dir="rtl" ng-controller="mainController">
    <div class="row" >

        <div class="col-sm-6">
            <button type="button" id="btnAddressAdd" class="btn btn-primary" ng-click="btnAddressAdd_click()">
                <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span>
            </button>
            <button type="button" id="btnAddressRemove" class="btn btn-danger" ng-click="btnAddressRemove_click()" ng-disabled="AddressControls.length==1">
                <span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span>
            </button>
        </div>
    </div>
    <hr />

        <fieldset class="row " id="Address" ng-repeat="item in AddressControls"  ng-disabled="$first">

        <div class="col-sm-1" >
            <div class="form-group">
                <label >
                prefix
                </label>
            </div>
        </div>
        <div class="col-sm-3" >
            <div class="form-group">
                <span></span>
                <select class="form-control" ng-model="prefixSelecteditem" ng-options="prefix.Title for prefix in AddressPrefix">
                    <option value="">--select option--</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <div class="errorBlock">
                </div>
                <input class="form-control" type="text" value="" style="height:32px">
            </div>
        </div>

    </fieldset>

</body>
</html>

link of source code in codepen

编辑

我有一些想法如何在 "Addbutton" 单击时执行此操作，但我想知道当有一些活动的组合框和用户 select 或更改其中之一的选项。

Answer 1

有很多方法可以实现这一点。这是其中两个：

方法 1：在 HTML 中使用 Angular 过滤器

var MainApplication = angular.module('mainApplication', []);

MainApplication.controller('mainController', ['$scope', function($scope) {
  $scope.AddressPrefix = [{
    id: 1,
    Title: 'AAA',
    priority: 1
  }, {
    id: 1,
    Title: 'BBB',
    priority: 2
  }, {
    id: 1,
    Title: 'CCC',
    priority: 3
  }, {
    id: 1,
    Title: 'DDD',
    priority: 4
  }, {
    id: 1,
    Title: 'EEE',
    priority: 5
  }, {
    id: 1,
    Title: 'FFF',
    priority: 6
  }, {
    id: 1,
    Title: 'GGG',
    priority: 7
  }, {
    id: 1,
    Title: 'HHH',
    priority: 8
  }, {
    id: 1,
    Title: 'III',
    priority: 2
  }, {
    id: 1,
    Title: 'jjj',
    priority: 2
  }, {
    id: 1,
    Title: 'kkk',
    priority: 2
  }, {
    id: 1,
    Title: 'LLL',
    priority: 10
  }, {
    id: 1,
    Title: 'MMM',
    priority: 9
  }, {
    id: 1,
    Title: 'ooo',
    priority: 7
  }, {
    id: 1,
    Title: 'PPP',
    priority: 12
  }, {
    id: 1,
    Title: 'qqq',
    priority: 3
  }, {
    id: 1,
    Title: 'RRR',
    priority: 13
  }, {
    id: 1,
    Title: 'zzz',
    priority: 14
  }, ];

  $scope.AddressControls = [{
    id: 1
  }];
  $scope.btnAddressAdd_click = function() {
    var newItemNo = $scope.AddressControls.length + 1
    $scope.AddressControls.push({
      'id': newItemNo
    });
  };
  $scope.btnAddressRemove_click = function() {
    $scope.AddressControls.pop();
  };

  $scope.myFilter = function(index) {
    return function(option, optionIndex, allOptions) {
      var lastSelectedOption = (index > 0) && $scope.AddressControls[index - 1] && $scope.AddressControls[index - 1].prefixSelecteditem;
      if (!lastSelectedOption) return true;
      return option.priority > lastSelectedOption.priority;
    }
  }
}]);

<html ng-app="mainApplication">

<head>
  <title></title>

  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>

<body dir="rtl" ng-controller="mainController">
  <div class="row">

    <div class="col-sm-6">
      <button type="button" id="btnAddressAdd" class="btn btn-primary" ng-click="btnAddressAdd_click()">
    <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span>
   </button>
      <button type="button" id="btnAddressRemove" class="btn btn-danger" ng-click="btnAddressRemove_click()" ng-disabled="AddressControls.length==1">
    <span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span>
   </button>
    </div>
  </div>
  <hr />

  <fieldset class="row " id="Address" ng-repeat="item in AddressControls track by $index" ng-disabled="$first">

    <div class="col-sm-1">
      <div class="form-group">

        <label>
    prefix
    </label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="form-group">
        <span></span>
        <select class="form-control" ng-model="item.prefixSelecteditem" ng-options="prefix.Title for prefix in AddressPrefix | filter: myFilter($index)">
     <option value="">--select option--</option>
    </select>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <div class="errorBlock">
        </div>
        <input class="form-control" type="text" value="" style="height:32px">
      </div>
    </div>

  </fieldset>


</body>

</html>

Method 1 CodePen

方法 2：在控制器中使用 Angular 过滤器

var MainApplication = angular.module('mainApplication', []);

MainApplication.controller('mainController', ['$scope', function($scope) {
  $scope.AddressPrefix = [{
    id: 1,
    Title: 'AAA',
    priority: 1
  }, {
    id: 1,
    Title: 'BBB',
    priority: 2
  }, {
    id: 1,
    Title: 'CCC',
    priority: 3
  }, {
    id: 1,
    Title: 'DDD',
    priority: 4
  }, {
    id: 1,
    Title: 'EEE',
    priority: 5
  }, {
    id: 1,
    Title: 'FFF',
    priority: 6
  }, {
    id: 1,
    Title: 'GGG',
    priority: 7
  }, {
    id: 1,
    Title: 'HHH',
    priority: 8
  }, {
    id: 1,
    Title: 'III',
    priority: 2
  }, {
    id: 1,
    Title: 'jjj',
    priority: 2
  }, {
    id: 1,
    Title: 'kkk',
    priority: 2
  }, {
    id: 1,
    Title: 'LLL',
    priority: 10
  }, {
    id: 1,
    Title: 'MMM',
    priority: 9
  }, {
    id: 1,
    Title: 'ooo',
    priority: 7
  }, {
    id: 1,
    Title: 'PPP',
    priority: 12
  }, {
    id: 1,
    Title: 'qqq',
    priority: 3
  }, {
    id: 1,
    Title: 'RRR',
    priority: 13
  }, {
    id: 1,
    Title: 'zzz',
    priority: 14
  }, ];

  $scope.AddressControls = [{
    id: 1
  }];
  $scope.btnAddressAdd_click = function() {
    var newItemNo = $scope.AddressControls.length + 1
    $scope.AddressControls.push({
      'id': newItemNo
    });
  };
  $scope.btnAddressRemove_click = function() {
    $scope.AddressControls.pop();
  };

  $scope.myFilter = function(arr, index) {
    var lastSelectedOption = (index > 0) && $scope.AddressControls[index - 1] && $scope.AddressControls[index - 1].prefixSelecteditem;
    if (!lastSelectedOption) return arr;
    return arr.filter(function (option) {
      return option.priority > lastSelectedOption.priority;
    });
  }
}]);

<html ng-app="mainApplication">

<head>
  <title></title>

  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>

<body dir="rtl" ng-controller="mainController">
  <div class="row">

    <div class="col-sm-6">
      <button type="button" id="btnAddressAdd" class="btn btn-primary" ng-click="btnAddressAdd_click()">
    <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span>
   </button>
      <button type="button" id="btnAddressRemove" class="btn btn-danger" ng-click="btnAddressRemove_click()" ng-disabled="AddressControls.length==1">
    <span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span>
   </button>
    </div>
  </div>
  <hr />

  <fieldset class="row " id="Address" ng-repeat="item in AddressControls track by $index" ng-disabled="$first">

    <div class="col-sm-1">
      <div class="form-group">

        <label>
    prefix
    </label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="form-group">
        <span></span>
        <select class="form-control" ng-model="item.prefixSelecteditem" ng-options="prefix.Title for prefix in myFilter(AddressPrefix, $index)">
     <option value="">--select option--</option>
    </select>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <div class="errorBlock">
        </div>
        <input class="form-control" type="text" value="" style="height:32px">
      </div>
    </div>

  </fieldset>


</body>

</html>

Method 2 CodePen

在第一个中，我们使用 angular 过滤器来过滤选项数组，在第二个中，我们只是将我们的数组传递给控制器中的一个函数，return 只是我们需要显示的选项.

我觉得第一种方法比较好，第二种方法更简单易懂！

编辑： 编辑会话的解决方案是 here!

如何根据 Angular js 中前一行中的相同组合框过滤由 Ng-Repeat 创建的组合框？

how to filter a combo box that is created by a Ng-Repeat based on the same combo box in the previous row in Angular js?

angularjs

combobox

angularjs-filter

dynamic-forms

编辑