AngularJS 체인 선택

Question

<select multiple ng-model="comp" ng-options="c.name for c in companies | unique: 'company'" style="width: 100%; height: 200px; float: left; margin-bottom: 20px"></select> 

<table> 
    <tr ng-repeat="c in comp"> 
    <td>{{ c.id }}</td> 
    </tr> 
</table> 

<select multiple ng-model="dep" ng-options="c.name for c in departments | filter: {company_id: comp.id}" style="width: 100%; height: 200px; float: left; margin-bottom: 20px"></select> 
<select multiple ng-model="pos" ng-options="c.name for c in positions | unique: 'position' | filter: {department_id: dep.id}" style="width: 100%; height: 200px; float: left"></select> 

내 코드는 어떻게 생겼지 만 부분적으로 만 작동합니다. ng-repeat을 통해 반복하면 선택 상자에서 회사를 클릭하면 c.id이 잘 인쇄됩니다. 문제는 - 결과를 필터링하려는 다른 선택 상자에 인쇄되지 않습니다. 그 원인은 무엇일까요?

JSFiddle : 문제는 comp는 (선택) 회사가 아닌 한 회사의 목록입니다 사실로 인해 발생http://jsfiddle.net/9Ymvt/853/

Answer 1

. 테이블이 잘 작동하는 동안 (테이블 반복 - 반복), comp.id은 undefined으로 계산되므로 필터가 실패합니다.

이 다음과 같이 될 우리의 필터를 변경함으로써 해결 될 수있다 :

<div ng-controller="fessCntrl"> 
    <select multiple ng-model="comp" ng-options="c.name for c in companies | unique: 'company'" style="width: 100%; height: 200px; float: left; margin-bottom: 20px"></select> 
    <table> 
     <tr ng-repeat="c in comp"> 
      <td>{{ c.id }}</td> 
     </tr> 
    </table> 
    <pre>{{ comp }}</pre> 
    <select multiple ng-model="dep" ng-options="c.name for c in departments | filter:sameId(comp, 'company_id')" style="width: 100%; height: 200px; float: left; margin-bottom: 20px"></select> 
    <select multiple ng-model="pos" 
     ng-options="c.name for c in positions | unique: 'position' | filter:sameId(dep, 'department_id')"     
     style="width: 100%; height: 200px; float: left"></select> 
</div> 

코드가 작동하려면 sameId는 fessCntrl의 범위에 정의되어야한다.

$scope.sameId = function(grouping, object_id_field_name) { 
    return function(object) { 
     var obj_id = object[object_id_field_name]; 
     for (var i = 0; i < grouping.length; i++) { 
      if (grouping[i].id == obj_id) 
       return true; 
     } 
     return false; 
    } 
};