Przełączanie modeli danych w AngularJS dla dynamicznych menu wyboru

Question

Co próbuję zrobić, to trzy różne menu, które zostaną wszystkie powiązane z tymi samymi danymi. Zmiana pierwszego menu wyboru spowoduje zmianę danych menu 2 i 3.

To jest wnętrze mojego kontrolera:

$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" } 
      ] 
     } 
    ]; 

Oto co próbowałem z odniesieniem do tej pory, który wykorzystuje ten sam pomysł mi potrzeba: http://codepen.io/adnan-i/pen/gLtap

Kiedy wybieram opcję „Brands Hatch "lub" Silverstone "z menu wyboru najpierw, pozostałe dwa menu będą miały zmianę/aktualizację danych, aby odpowiadały poprawnym danym. Używam $ watch do odsłuchiwania zmian, które zostały wykonane z powyższego odnośnika CodePen.

Oto skrypt oglądanie (modyfikowany i oczywiście nie działa):

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

O ile wiem, to usuwa bieżące dane na temat zmian, następnie pętle przez $ scope.data i jeśli attr .id dopasowuje identyfikator przekazany do funkcji, przesyła dane z powrotem do zakresu, który aktualizuje widoki. Naprawdę utknąłem na tym i chciałbym otrzymać pewne wskazówki i pomoc, ponieważ jestem nowym użytkownikiem AngularJS. Dziękuję Ci! :)

jsFiddle na pełne funkcjonowanie jeśli ktoś może pomóc: http://jsfiddle.net/sgdea/

Answer 1

Sprawdź, co robiłem tutaj: http://jsfiddle.net/sgdea/2/

Nie trzeba używać $watch w ogóle - ty wystarczy zrobić dane wejściowe dla każdego zależnego wyboru odniesienia, wybór w rodzica.

Uwaga jak ng-options dla drugiego i trzeciego wybierz odniesienie , który jest ustawiany przez pierwszy wybór:

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

Wszystko zrobiłem w javascript było usunąć swój $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" } 
      ] 
     } 
    ]; 
}]);