10

私がやろうとしているのは、すべて同じデータに関連付けられる 3 つの異なる<select>メニューを用意することです。最初の選択メニューを変更すると、メニュー 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

最初の選択メニューから「Brands Hatch」または「Silverstone」を選択すると、他の 2 つのメニューのデータが変更/更新され、正しいデータに対応します。$watchを使用して、上記の 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/

4

1 に答える 1

17

ここで行ったことを確認してください: http://jsfiddle.net/sgdea/2/

まったく使用する必要はありません$watch。各依存選択の入力が親の選択を参照するようにするだけで済みます。

最初の選択によって設定されるng-options2 番目と 3 番目の選択参照の方法に注意してください。selected.site

<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" }
            ]
        }
    ];
}]);
于 2013-07-17T13:38:45.360 に答える