Question

我有两个选择元素。在我的第一个选择中，我加载名称。我希望当我选择名称时，第二个选择元素的选项将被过滤以仅包括所选用户的年龄。

示例：

当我在第一次选择中选择Jacob时，我希望我的Age选择27作为唯一选项。

<table ng-table="tableParams" show-filter="true" class="table">
    <tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }">
        <td data-title="'Name'" filter="{ 'name': 'select' }" filter-data="names($column)">
            {{user.name}}
        </td>
        <td data-title="'Age'" filter="{ 'age': 'select' }" filter-data="ages($column)">
            {{user.age}}
        </td>
    </tr>
</table>

如何根据第一个选择元素自动过滤我的第二个选择元素？

Answer 1

这是一个有效的演示：http://plnkr.co/edit/3tLixkFKYgpXfx04PbaD?p=preview

一种方法是为过滤器创建自定义模板。这样您就可以完全控制过滤器绑定的数组，并且可以轻松附加更改事件：

<script type="text/ng-template" id="ng-table/filters/name.html">
  <select ng-options="name.id as name.title for name in nameOptions" 
          ng-model="params.filter()['name']" 
          ng-change="ages(column, params.filter()['name'])">
  </select>
</script>
<script type="text/ng-template" id="ng-table/filters/age.html">
  <select ng-options="age.id as age.title for age in ageOptions" 
          ng-model="params.filter()['age']"></select>
</script>

然后，使用ng-table标记中的模板：

<td data-title="'Name'" filter="{ 'name': 'name' }" filter-data="names($column)">
  {{user.name}}
</td>
<td data-title="'Age'" filter="{ 'age': 'age' }" filter-data="ages($column)">
  {{user.age}}
</td>

您可以在现有的names和ages函数中填充选项数组：

$scope.names = function(column) {
    ...

    $scope.nameOptions = names;

    ...
};


$scope.ages = function(column, name) {      
  var def = $q.defer(),
      arr = [],
      ages = [];
  angular.forEach(data, function(item) {
      if (inArray(item.age, arr) === -1) {
          if (angular.isUndefined(name) || item.name === name) {
            arr.push(item.age);
            ages.push({
                'id': item.age,
                'title': item.age
            });
          }
      }
  });

  $scope.ageOptions = ages;

  def.resolve(ages);
  return def;
};

Answer 2

我试图解决这个问题。如果它与你需要的相同，请告诉我。
演示：Fiddle

<body ng-app ng-controller="AppCtrl">
<select ng-model="selectedName" ng-options="item as item for item in name">
    <option value="">Select Name</option>
</select>
<pre>selectedItem: {{selectedName | json}}</pre>

<select ng-model="selectedage" ng-options="item as item for item in age">
    <option ng-if="!selectedage" value="">Select age</option>
</select>
<pre>selectedItem: {{selectedage | json}}</pre>
</body>

JS：

function AppCtrl($scope) {

$scope.name = ["Ved", "James", "Doe","Prakash" ];
var age = {Ved :["25"],James :["26"],Doe:["27"],Prakash:["28"]};
    $scope.$watch('selectedName', function(newValue, oldValue) {
      if ( newValue) {
            var name = $scope.selectedName;
  $scope.age = age[name];
    }
  });
}

Answer 3

这是一个演示 http://plnkr.co/edit/5fvtiept6M6VpAmo8a5f?p=preview 所以你可以做的是，你可以使用你的第一个选择模型对象作为第二个下拉列表的过滤器。

或

用户首先选择绑定对象，即＆＃34; formData.name＆＃34;在这里举例，在第二次下拉。

<!DOCTYPE html> <html> <head> <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script> <script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script> <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" /> <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="app.js"></script> </head> <body ng-app="main" ng-controller="DemoCtrl"> <table ng-table="tableParams" show-filter="true" class="table"> <tr> <td data-title="'Name'"> <select name="name" data-ng-model="formData.name" ng-options="user.name for user in $data" ng-change="changeAge(formData.name)" required > <option value="">Select</option> </select> </td> <td data-title="'Age'"> <select name="age" data-ng-model="formData.age" > <option value="">Select</option> <option value="">{{formData.name.age}}</option> </select> </td> </tr> <tr ng-repeat="user in $data|filter:formData.name"> <td> {{user.name}} </td> <td> {{user.age}} </td> </tr> </table> </body> </html>

使用NgTable过滤选择

3 个答案: