配列内のオブジェクトプロパティの角度フィルタ

Question

$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> 

Answer 1

で働いています

は、以下のコードをチェックしてください

ng-model="ctrl.stateFilter" 

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

、あなたのng-modelディレクティブと、次のようfilterパイプに渡すオプションを変更し

。

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>