Question

好的，我真的找不到正确的术语/词来形容这一点。基本上，我有一个选择控件和一个ITypeB

的div

ng-repeat

该代码有点有效，但我不知道如果所选项目是“全部”，如何显示所有代码。

Answer 1

如果另一个选项设置为＆＃34; ALL＆＃34;，此表达式将显示具有所选代码或名称的所有项目。如果两个选择框都设置为＆＃34; ALL＆＃34;，它还将显示所有项目。如果没有任何选择框设置为＆＃34; ALL＆＃34;它将仅显示具有相应名称和代码的匹配项目。

ng-if="(selectedCode==item.code || selectedCode=='') &&
       (selectedName==item.name || selectedName=='')">

要预先选择一个值，以便在页面加载后直接应用ng-if，您可以添加一个ng-init Expression来设置默认值，如下所示。

ng-init="selectedCode=''"
ng-init="selectedName='John'"

将所有这些放入上下文中，这是一个示例，显示了一个带有ng-repeat的表和两个用于利用ng-if表达式的选择框。代码＆＃34;＆＃34;和＃34; John＆＃34;是预选的，我添加了JavaScript块。

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>

  <body>
    <div ng-app="ngApp">
      <select ng-model="selectedCode" ng-init="selectedCode=''">
        <option value="">ALL</option>
        <option value="A">Option A</option>
        <option value="B">Option B</option>
        <option value="C">Option C</option>
      </select>

      <select ng-model="selectedName" ng-init="selectedName='John'">
        <option value="">ALL</option>
        <option value="John" selected="selected">John</option>
        <option value="Peter">Peter</option>
      </select>

      <div ng-controller="ngController">
        <table>
          <tr>
            <th>Code</th>
            <th>Name</th>
          </tr>
          <tr ng-repeat="item in myList" ng-if="(selectedCode==item.code || selectedCode=='') && (selectedName==item.name || selectedName=='')">
            <td>{{item.code}}</td>
            <td>{{item.name}}</td>
          </tr>
        </table>
      </div>
    </div>

    <script>
      angular.module('ngApp', [])
        .controller('ngController', function($scope) {
          $scope.myList = [ {code:'A', name:'John'}, {code:'B', name:'Peter'}, {code:'C', name:'Peter'} ];
        });
    </script>
  </body>
</html>

如何在AngularJS中过滤数据？

1 个答案: