在AngularJS中切換動態選擇菜單的數據模型

Question

我想要做的是有三個不同的<選擇>菜單將被全部綁定到相同的數據中。改變第一個選擇菜單，將改變菜單2和3的數據。

這是我的控制器內：

$scope.data = [ 
     { 
      "id" : "0", 
      "site" : "Brands Hatch", 
      "buildings" : [ 
       { "building" : "Building #1" }, 
       { "building" : "Building #2" }, 
       { "building" : "Building #3" } 
      ], 
      "floors" : [ 
       { "floor" : "Floor #1" }, 
       { "floor" : "Floor #2" }, 
       { "floor" : "Floor #3" } 
      ] 
     },{ 
      "id" : "1", 
      "site" : "Silverstone", 
      "buildings" : [ 
       { "building" : "Building #4" }, 
       { "building" : "Building #5" }, 
       { "building" : "Building #6" } 
      ], 
      "floors" : [ 
       { "floor" : "Floor #4" }, 
       { "floor" : "Floor #5" }, 
       { "floor" : "Floor #6" } 
      ] 
     } 
    ]; 

下面是我從一個參考到目前爲止已經試過，它使用同樣的想法，我需要：http://codepen.io/adnan-i/pen/gLtap

當我選擇「布蘭茲哈奇「或‘從第一選擇菜單銀石賽道’，另外兩個菜單都會有自己的數據改變/更新用正確的數據相對應。我使用$看偵聽變化，我從拍攝上述CodePen鏈接。

這裏是觀賞腳本（未修改顯然不工作）：

$scope.$watch('selected.id', function(id){ 
     delete $scope.selected.value; 
     angular.forEach($scope.data, function(attr){ 
      if(attr.id === id){ 
       $scope.selectedAttr = attr; 
      } 
     }); 
    }); 

據我所知，這將刪除上改變目前的數據，然後通過$ scope.data如果ATTR循環.id匹配傳入函數的ID，它將數據推回到更新視圖的範圍。我只是真的停留在構建這一點，並希望得到一些指導和幫助，因爲我真正的新AngularJS。謝謝！ :)

的jsfiddle爲全面運作，如果有人可以幫忙： http://jsfiddle.net/sgdea/

Answer 1

查了一下我在這裏所做的：http://jsfiddle.net/sgdea/2/

你並不需要使用$watch在所有 - 你只需要爲每個相關選擇參考輸入父項中的選擇。

注意如何ng-options第二和第三選擇參考，這是由第一組選擇：

<div ng-app="myApp" ng-controller="BookingCtrl"> 
    <select ng-model="selected.site" 
      ng-options="s.site for s in data"> 
     <option value="">-- Site --</option> 
    </select> 
    <select ng-model="selected.building" 
      ng-options="b.building for b in selected.site.buildings"> 
     <option value="">-- Building --</option> 
    </select> 
    <select ng-model="selected.floor" 
      ng-options="f.floor for f in selected.site.floors"> 
     <option value="">-- Floor --</option> 
    </select> 
</div> 

所有我在JavaScript所做的是刪除您$watch：

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

myApp.controller('BookingCtrl', ['$scope', '$location', function ($scope, $location) { 

    $scope.selected = {}; 

    $scope.data = [ 
     { 
      "id" : "0", 
      "site" : "Brands Hatch", 
      "buildings" : [ 
       { "building" : "Building #1" }, 
       { "building" : "Building #2" }, 
       { "building" : "Building #3" } 
      ], 
      "floors" : [ 
       { "floor" : "Floor #1" }, 
       { "floor" : "Floor #2" }, 
       { "floor" : "Floor #3" } 
      ] 
     },{ 
      "id" : "1", 
      "site" : "Silverstone", 
      "buildings" : [ 
       { "building" : "Building #4" }, 
       { "building" : "Building #5" }, 
       { "building" : "Building #6" } 
      ], 
      "floors" : [ 
       { "floor" : "Floor #4" }, 
       { "floor" : "Floor #5" }, 
       { "floor" : "Floor #6" } 
      ] 
     } 
    ]; 
}]);