文章/答案/技术大牛

发布

社区首页 >问答首页 >使用NgTable筛选select

问使用NgTable筛选select
EN

Stack Overflow用户

提问于 2015-03-19 22:19:18

回答 3查看 5.6K关注 0票数 1

我有两个select元素。在我的第一个select中，我加载了名称。我希望当我选择一个名字时，过滤第二个select元素的选项，使其只包含所选用户的年龄。

示例：

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

Plunker

<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>

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

javascript

angularjs

ngtable

回答 3

Stack Overflow用户

发布于 2015-03-25 03:31:25

下面是一个有效的演示：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;
};

票数 2

Stack Overflow用户

发布于 2015-03-25 00:58:27

我试着解决这个问题。如果和你需要的一样，请告诉我。

演示：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];
    }
  });
}

票数 1

Stack Overflow用户

发布于 2015-03-27 01:18:33

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

或

用户首先选择绑定的对象，该对象在示例中为"formData.name“，在第二个下拉列表中。

    <!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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29147024

复制

相似问题

问使用NgTable筛选select
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用NgTable筛选selectEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用NgTable筛选select
EN