배열 내부의 객체 속성에 대한 각도 필터

Question

$scope 안에 객체 배열이 있습니다. 객체에는 name이 있고 '속성'속성에는 attributes이 있습니다. 나는 name 또는 noOfCitizens을 기반으로 상태를 필터링하는 데 사용해야하는 모델에 바인딩해야하는 텍스트 필드가 있습니다. 그러나 아래 코드는 항목을 필터링하지 않습니다. 내가 잘못 가고있는 곳.

나는 다음과 같이

//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 파이프에 전달되는 옵션을 변경

1.5.8 버전,

ng-model="ctrl.stateFilter" 

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

는 아래의 코드를 확인 AngularJS와 함께 일하고 있습니다.

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>