數組內對象屬性的角度過濾器

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>