Angularjsの2番目のドロップダウンは最初に依存します

Question

質問があります。最初のドロップダウンから選択項目に応じて2番目のドロップダウンを作成するにはどうすればいいですか？

<div ng-app="myapp"> 
<fieldset ng-controller="FirstCtrl"> 
    <select 
     ng-options="p.id for p in jobs" 
     ng-model="selectedPerson"></select> 
    {{ selectedPerson }} 
</fieldset> 

Answer 1

でmultipleを使用することができます。実際、リストの選択オプションは、最初の選択リストの値に依存することができます。

HTML

コントローラ

var myapp = angular.module('myapp', []); 
myapp.controller('FirstCtrl', function ($scope) { 
    $scope.jobs1 = [ 
    { 
     "id": 600, 
     "sector": "Controlling", 
     "cost": 4700 
    }, 
    { 
     "id": 600, 
     "sector": "finance", 
     "cost": 4700 

    }, 
    { 
     "id": 40, 
     "sector": "IT", 
     "cost": 7600 

    }, 
    { 
     "id": 50, 
     "sector": "Controlling", 
     "cost": 4600 

    }, 
    { 
     "id": 50, 
     "sector": "IT", 
     "cost": 4600 

    },{ 
     "id": 41, 
     "sector": "Controlling", 
     "cost": 1100 

    }, 
    { 
     "id": 41, 
     "sector": "IT", 
     "cost": 1100 

    } 
]; 
$scope.jobs2 = []; 

$scope.firstSelectChange = function(){ 
    $scope.jobs2 = []; 
    $scope.selectedPerson2 = ''; 
for(var i=0; i<$scope.jobs1.length; i++){ 
     if($scope.jobs1[i].id === $scope.selectedPerson1.id){ 
      $scope.jobs2.push($scope.jobs1[i]); 
     } 
    } 
} 

}); 

あなたが最初の選択リスト内のオプションを選択すると、2番目の選択リストのオプションを動的に変更されていることを確認することができます。ここではより多くの実験や観察のため

がJSFIDDLE

Answer 2

あなたは一度に1つの選択オプションを選択することができます。他の賢明なあなたは、私が選択リストには、別のに依存する方法をお見せするために興味深い例を持っているあなたの選択ボックス

<div ng-app="myapp"> 
    <fieldset ng-controller="FirstCtrl"> 
     <select multiple 
      ng-options="p.id for p in jobs" 
      ng-model="selectedPerson" ng-change="addItems()"></select> 


     <select 
      ng-options="p.id for p in selectedPerson" 
      ng-model="selecteditems" ng-change="addItems()"></select> 
    </fieldset> 
</div> 

Demo