AngularJS clained select

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:http://jsfiddle.net/9Ymvt/853/

Answer 1

Проблема вызвана тем, что comp является список (отдельных) компаний, а не одну компанию. В то время как таблица работает нормально (ng-repeat итерации по таблице), фильтр не работает, так как 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; 
    } 
};