数组内对象属性的角度过滤器答案

【问题标题】：Angular filter on object property inside an array数组内对象属性的角度过滤器
【发布时间】：2016-11-15 16:46:50
【问题描述】：

我在$scope 中有一个对象数组。该对象具有name 和“属性”属性，其中attributes 是一个对象。我有一个文本字段，我需要绑定到一个模型，该模型应该用于根据name 或noOfCitizens 过滤状态。但是，下面的代码没有过滤项目。我哪里出错了。

我正在使用 Angularjs 1.5.8 版本

//Inside the controller

$scope.states=[];   
    var mp = {};
    mp.name = "MP";
    mp.attributes= {
        "name":"MP",
        "noOfCitizens":"~ 900000"
    };

    var ts = {};
    ts.name = "TS";
    ts.attributes= {
        "name":"TS",
        "noOfCitizens":"~ 8000"
    };
    $scope.states.push(mp);
    $scope.states.push(ts);

<!-- Inside my html page -->
<div style="margin-left: 10px">
  <input type="text" ng-model="state.attributes['name']" placeholder="filter">
</div>
<div class="col-lg-3" ng-repeat="state in states | filter:state.attributes['name']">
  <h2>{{state.name}}</h2>
  <ul>
    <li>Name: {{state.attributes['name']}}</li>
    <li>No Of Citizens: {{state.attributes['noOfCitizens']}}</li>
  </ul>
</div>

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

如下更改您的ng-model 指令和传递给filter 管道的选项，

ng-model="ctrl.stateFilter"

ng-repeat="state in ctrl.states | filter : ctrl.stateFilter"

检查下面的代码sn-p。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  vm.states = [];
  var mp = {
    name: "MP",
    attributes: {
      "name": "MP",
      "noOfCitizens": "~ 900000"
    }
  };

  var ts = {
    name: "TS",
    attributes: {
      "name": "TS",
      "noOfCitizens": "~ 8000"
    }
  };

  var vs = {
    name: "VS",
    attributes: {
      "name": "VS",
      "noOfCitizens": "~ 8000"
    }
  };

  vm.states.push(mp);
  vm.states.push(ts);
  vm.states.push(vs);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div style="margin-left: 10px">
      <input type="text" ng-model="ctrl.stateFilter" placeholder="filter">
    </div>
    <div class="col-lg-3" ng-repeat="state in ctrl.states | filter : ctrl.stateFilter">
      <h2>{{state.name}}</h2>
      <ul>
        <li>Name: {{state.attributes.name}}</li>
        <li>No Of Citizens: {{state.attributes.noOfCitizens}}</li>
      </ul>
    </div>
  </div>
</div>

【讨论】：