Commutazione dei templates di dati in AngularJS per i menu di selezione dynamic

Quello che sto cercando di fare è avere tre diversi menu <select> che saranno tutti legati agli stessi dati. Cambiare il primo menu di selezione, cambierà i dati dei menu 2 e 3.

Questa è l'interno del mio Controller:

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

Ecco cosa ho provato da un riferimento finora, che utilizza la stessa idea che mi serve: http://codepen.io/adnan-i/pen/gLtap

Quando seleziono "Brands Hatch" o "Silverstone" dal primo menu di selezione, gli altri due menu avranno i loro dati di modifica / aggiornamento per corrispondere ai dati corretti. Sto usando $ watch per ascoltare i cambiamenti, che ho preso dal link di cui sopra CodePen.

Ecco lo script di visualizzazione (non modificato e ovviamente non funzionante):

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

Per quanto ne so, questo elimina i dati correnti sulla modifica, quindi loop attraverso $ scope.data e se l'attr.id corrisponde all'ID passato alla function, spinge i dati sul field di applicazione che aggiorna le viste. Sono solo veramente attaccato a strutturare questo e apprezzerei qualche guida e aiuto perché sono davvero nuovo a AngularJS. Grazie! 🙂

jsFiddle per i lavori completi se qualcuno può aiutare: http://jsfiddle.net/sgdea/

Scopri cosa ho fatto qui: http://jsfiddle.net/sgdea/2/

Non è necessario utilizzare $watch a tutti – è sufficiente effettuare gli input per ciascuna selezione selezionata dipendente dalla selezione nel genitore.

Notare come sono selezionate le ng-options per il secondo e il terzo riferimento selected.site , impostato dalla prima selezione:

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

Tutto quello che ho fatto nel javascript è stato rimuovere la tua $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" } ] } ]; }]);