Javascript 使用NgTable进行筛选选择

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

例如：

当我在第一次选择中选择

Jacob

时，我希望我的

Age

选择将

27

作为唯一选项

{{user.name}
{{user.age}

---

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

我试图解决这个问题。让我知道它是否和你需要的一样
演示：

---

我试图解决这个问题。让我知道它是否和你需要的一样
演示：

下面是一个工作演示：

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

$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;
};

您可以在现有的

名称

和

年龄

函数中填充选项数组：

下面是一个工作演示：

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

$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;
};

您可以在现有的

名称

和

年龄

函数中填充选项数组：

这是一个演示 因此，您可以做的是，您可以使用第一个select ng模型对象作为第二个下拉列表的过滤器

或

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

挑选
挑选
{{formData.name.age}
{{user.name}
{{user.age}

这是一个演示 因此，您可以做的是，您可以使用第一个select ng模型对象作为第二个下拉列表的过滤器

或

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

挑选
挑选
{{formData.name.age}
{{user.name}
{{user.age}

选择某个问题后，您希望发生什么？@pankajparkar我有更新我的问题您如何对一个声明自己是另一个问题的重复的问题给予奖励？为什么不把悬赏放在原稿上？@JRichardSnape好的，我更新了我的问题，这是有效的：）向下投票-这是一个好问题，顺便说一句，希望你得到一个好答案！在你选择某个问题后，你想发生什么？@pankajparkar我已经更新了我的问题你怎么能对一个声称自己是另一个问题的复制品的问题悬赏？为什么不把悬赏放在原稿上？@JRichardSnape好的，我更新了我的问题，这是有效的：）向下投票-这是一个好问题，顺便说一句，希望你得到一个好答案！对你的回复没问题，但是为什么在选择

name

中有重复的条目呢？好的，因为我想你有3个或4个相同的名称对象。。你也可以根据他们的金钱属性对他们进行过滤。。如果你想用小提琴演奏，请告诉我。。谢谢：）这是可能有一把小提琴请，所以我已经创建了这个劫掠器，它将根据filterData（）中的条件过滤你的对象数组函数和您在“按货币筛选”搜索框中给出的值。对于您的响应，可以，但为什么在“选择<代码>名称中有重复的条目。？可以，因为我想您在3或4中有相同的名称对象。。你也可以根据他们的金钱属性对他们进行过滤。。如果你想用小提琴演奏，请告诉我。。谢谢：）请拿一把小提琴是可能的，所以我创建了这个plunker，它将根据filterData（）函数中的条件和您在“按货币过滤”搜索框中给出的值过滤对象数组。

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

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

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

$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;
};

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