Chuyển đổi mô hình dữ liệu trong AngularJS cho các menu chọn động

Question

Điều tôi đang cố gắng thực hiện là có ba khác nhau < chọn > các menu sẽ được gắn vào cùng một dữ liệu. Thay đổi menu chọn đầu tiên, sẽ thay đổi dữ liệu của menu 2 và 3.

Đây là bên trong điều khiển của tôi:

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

Dưới đây là những gì tôi đã cố gắng từ một tài liệu tham khảo cho đến nay, trong đó sử dụng cùng một ý tưởng tôi cần: http://codepen.io/adnan-i/pen/gLtap

Khi tôi chọn 'Brands Hatch 'hoặc' Silverstone 'từ menu đầu tiên đầu tiên, hai trình đơn khác sẽ có thay đổi/cập nhật dữ liệu của chúng tương ứng với dữ liệu chính xác. Tôi đang sử dụng $ xem để nghe các thay đổi mà tôi đã thực hiện từ liên kết CodePen ở trên.

Đây là ngắm kịch bản (chưa sửa đổi và rõ ràng là không làm việc):

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

Theo như tôi biết, điều này xóa dữ liệu hiện hành về sự thay đổi, sau đó vòng qua scope.data$ và nếu attr .id khớp với id được truyền vào hàm, nó đẩy dữ liệu trở lại phạm vi cập nhật các khung nhìn. Tôi chỉ thực sự bị mắc kẹt về cấu trúc này và sẽ đánh giá cao một số hướng dẫn và giúp đỡ như tôi thực sự mới để AngularJS. Cảm ơn bạn! :)

jsFiddle cho toàn bộ hoạt động nếu có ai có thể giúp đỡ: http://jsfiddle.net/sgdea/

Answer 1

Kiểm tra ra những gì tôi đã làm ở đây: http://jsfiddle.net/sgdea/2/

Bạn không cần phải sử dụng $watch ở tất cả - bạn chỉ cần thực hiện các đầu vào cho mỗi phụ thuộc chọn tham chiếu lựa chọn trong phụ huynh.

Lưu ý cách ng-options cho phần thứ hai và thứ ba chọn tài liệu tham khảo , được thiết lập bởi người đầu tiên chọn:

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

Tất cả tôi đã làm trong javascript đã loại bỏ của bạn $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" } 
      ] 
     } 
    ]; 
}]);