Вложенные варианты с использованием угловых

Question

$scope.senders = {} 
    $scope.senders.list = [{name: NYC, supportedSendingMethods: ['Send by mail', 'Send by sms', 'c']}, {name: GEN, supportedSendingMethods: ['Send by mail','Send by sms','c']}]; 
    $scope.senders.selected = $scope.senders[0]; 
    $scope.senders.selectedSending = $scope.senders[0].supportedSendingMethods[0]; 

Сначала выберите:

<select ng-model="senders.selected" ng-options="sender.name for sender in senders"> 
</select> 
//This one works as expected 

Поддерживается метод отправки:

<select ng-model="senders.selectedSending" ng-options="supp.supportedSendingMethods for supp in senders | filter:{name:senders.selected.name} "> 
</select> 

Последние выберите показывает все поддерживаемые методы отправки для выбранного отправителя. Проблема в том, что параметры во втором выборе являются самими arraylists.

Как я могу пойти один уровень глубже (с фильтрами) и показать

1) показать supportedSendingMethods

2) выбранного отправителя?

Answer 1

Как вы уже выбрали отправителя, хранящегося в переменной senders.selected, тогда почему бы просто не использовать его? Это самый лучший вариант, я думаю:

ng-options="supp for supp in senders.selected.supportedSendingMethods" 

Просто ответить на исходный вопрос я могу предложить два способа добиться того, что вам нужно с выражением фильтрации. Одним из способов является просто доступом первого элемента отфильтрованной коллекции - angular.js поддерживает такие выражения:

ng-options="supp for supp in (senders | filter:{name:senders.selected.name})[0].supportedSendingMethods " 

Другой вариант заключается в определении отдельного фильтра для этого - это будет выглядеть лучше, немного:

ng-options="supp for supp in senders | filter:{name:senders.selected.name} | getFirst:'supportedSendingMethods'" 

Здесь вы можете увидеть все способы: http://jsfiddle.net/GRaAL/WMAea/.

Answer 2

Вы можете попробовать этот путь без фильтров. Th точка установить модель senders.currentSender в списке для второго выбора:

HTML

<div ng-controller="fessCntrl"> 
    <select ng-model="senders.currentSender" 
      ng-options="sender.name for sender in senders.list"></select> 

    <select ng-model="supp" 
    ng-options="supp for supp in senders.currentSender.supportedSendingMethods" 
    ng-init="supp=senders.currentSender.supportedSendingMethods[0]"  
    ></select>   
</div> 

JS

var fessmodule = angular.module('myModule', []); 

fessmodule.controller('fessCntrl', function ($scope) { 
    $scope.senders = {}; 

    $scope.senders.list = [{ 
     name: 'NYC', 
     supportedSendingMethods: ['Send by mail1', 'Send by sms1', 'c1'] 
    }, { 
     name: 'GEN', 
     supportedSendingMethods: ['Send by mail2', 'Send by sms2', 'c2'] 
    }]; 

    $scope.senders.currentSender = $scope.senders.list[0]; 
    $scope.supp = $scope.senders.currentSender.supportedSendingMethods[0]; 
}); 

Добавляя $watch теперь мы можем выбрать по значению 1 по умолчанию :

$scope.$watch(function() { 
    return $scope.senders.currentSender; 
    }, 
    function (newValue, oldValue) { 
      $scope.supp = newValue.supportedSendingMethods[0];    
    }, true); 

Demo Fiddle