嵌套選項使用角

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

最後選擇顯示所有支持的發送對於所選擇的發送者的方法。問題在於第二個選擇中的選項本身就是數組列表。

我怎麼能去更深一層（帶過濾器），並顯示

1）顯示所選發件人的supportedSendingMethods

2）？

來源

2014-01-27 Vincent

由於您已經選擇存儲在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/。

來源

2014-01-27 10:12:22 GRaAL

您可以嘗試這種方式沒有過濾器。個點設置的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>

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我們現在可以通過默認第一個值選擇：

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

演示Fiddle

來源

2014-01-27 10:27:47

嵌套選項使用角

回答

相關問題