Угловой фильтр по объекту внутри массива

Question

У меня есть массив объектов внутри $scope. Объект имеет свойство name и 'attributes', из которых 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> 

Answer 1

ng-model Изменения директивы и возможности передаваемой в filter трубу следующим образом,

ng-model="ctrl.stateFilter" 

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

Проверьте ниже фрагмент кода.

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>