Question

 <div class="district-list" ng-repeat="office in offices | filter : {'DisplayOffice' : officeLocationLevelList.searchText}|limitTo:1">

拥有多级数据列表。取决于我想要过滤数据的条件。（第一级/内级）。如果选择了第一级，那么我必须使用一个json属性进行搜索，如果选择了内部级别，则使用另一个json属性进行搜索。我已将其设置为范围变量。如何使用范围变量而不是“ DisplayOffice ”

Answer 1

您可以将函数绑定到filter，使用范围变量返回过滤条件。

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: {[key]:value}">
    {{item.name}}
  </div>
</div>

使用ES6的新功能{[key]: value}时还有另一种方法，但现在可能适用于某些浏览器。

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.$watch("key", function() {
      console.log({[$scope.key]:$scope.value});
    });
    $scope.$watch("value", function() {
      console.log({[$scope.key]:$scope.value});
    });
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  
  <div ng-repeat="item in data | filter: {[key]: value}">
    {{item.name}}
  </div>
</div>

Angularjs：过滤条件

1 个答案: