Dinamik seçim menüleri için AngularJS'de anahtarlama veri modelleri

Question

Yapmaya çalıştığım şey, hepsinin aynı verilere bağlanması gereken üç farklı < seçmeli > menülere sahip olmasıdır. İlk seçim menüsünü değiştirmek, menü 2 ve 3'ün verilerini değiştirecektir.

İşte

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

şimdiye kadar bir referanstan çalıştık ne, ihtiyacım aynı fikri kullanır: http://codepen.io/adnan-i/pen/gLtap

Ya 'Brands Hatch seçmek

Bu

benim Kontrolör içeride 'dan ya da' Silverstone 'menüsünden seçim menüsünü seçin, diğer iki menünün de veriyi doğru/güncel veriyi güncellemesi/güncellemesi olacaktır. Yukarıdaki CodePen bağlantısından aldığım değişiklikleri dinlemek için $ saatini kullanıyorum. İşte

(değiştirilmemiş ve açıkçası çalışmıyor) gözlemciliği komut dosyası:

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

olarak bildiğim kadarıyla, bu daha sonra $ scope.data içinden ve attr eğer döngüler, değişime güncel verileri siler .ID, işleve geçirilen kimliği eşleştirir, verileri görüntüyü güncelleştiren kapsama geri iter. Bunu gerçekten yapılandırmak üzereydim ve AngularJS için gerçekten yeni olduğum için bazı rehberlik ve yardımları takdir ediyorum. Teşekkür ederim! :) tam işleyişini için

jsFiddle kimse yardımcı olabilir eğer: Burada ne yaptık http://jsfiddle.net/sgdea/

Answer 1

atın: http://jsfiddle.net/sgdea/2/

Sen hiç $watch kullanmaya gerek yoktur - sizi Her bağımlı seçim referansı için girişleri ebeveynin içindeki seçimi yapması yeterlidir.

Not ilk tarafından ayarlanır ikinci ve belirli üçüncü referans için ng-options seçmek nasıl:

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