Question

我是angularjs的新手，只知道几件事。我正在尝试使用类似于以下内容的数据创建应用程序：

team = [ {id:1, name: 'abc',type: 'cricket', country: 'usa'} ];

显示在表格中，我有一个显示国家/地区列表的组合框。

我想要做的是当我从下拉列表中选择一个国家时，应该只显示与该国家匹配的行。

Answer 1

您可以将filter与ngRepeat：

一起使用

（Plnkr example）

HTML：

<!DOCTYPE html>
<html ng-app="test">

  <head>
    <script data-require="angular.js@1.2.13" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="TestCtrl">
    <input type="text" ng-model="searchCountry">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="team in teams | filter:{country: searchCountry}">
          <td>{{team.name}}</td>
          <td>{{team.type}}</td>
          <td>{{team.country}}</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

脚本：

angular.module('test', [])
  .controller('TestCtrl', function($scope) {
    $scope.searchCountry = '';

    $scope.teams = [
      {id:1,name: 'abc' ,type: 'cricket' ,country: 'usa'},
      {id:1,name: 'def' ,type: 'cricket' ,country: 'canada'},
      {id:1,name: 'ghi' ,type: 'cricket' ,country: 'mexico'}
      ];


  });

修改

以上使用文本框进行搜索，这与您提出的不完全相同。如果你想使用一个组合框并且只显示完全匹配，它可能看起来像这样：

<select ng-model="country" ng-options="c for c in countries"> <option value="">(No Filter)</option> </select> ... <tr ng-repeat="team for team in teams | filter:filterFunction"> ... </tr>

/* controller */ $scope.countries = ['usa', 'mexico', 'canada']; $scope.filterFunction = function(team) { /* no country selected or country matches */ return (!$scope.country || team.country === $scope.country); };

如何通过angularjs中的组合更新表中的数据

1 个答案: