0

2 つの選択ボックスがあります。1 つはユーザーの種類 (グループまたは個人など) を選択するためのもので、1 番目のボックスの出力の 2 番目はユーザー/グループを選択するためのオプションを表示するためのものです。とにかく、私の式ではng-options、次のような変数の代わりに関数を渡すことができます:

ng-options="user.id as user.description for user in getUserList(userType)"

userType は最初の選択ボックスの ng-model です

私自身の試行から、これは不可能であるという印象を受けています (chrome の現在のタブと firefox のアプリケーション全体がクラッシュするようです)。

これに対する最善のアプローチは何でしょうか。この種の 2 つの選択ボックスのセットアップを使用する選択がたくさんあるので、コピーと貼り付けを避けることができればいいと思います。

4

3 に答える 3

1

データに応じて、次のように簡単になります。

<select ng-model="type" ng-options="type for type in types"></select>
<select ng-model="user" ng-options="user.name for user in users[type]" ng-if="type != 'skipped'"></select>

と：

app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.types = ['group', 'individual', 'skipped'];
  $scope.type = $scope.types[0];

  $scope.users = {
    group: [
      { id: 1, name: 'foo' },
      { id: 2, name: 'bar' }
    ],
    individual: [
      { id: 3, name: 'foobar' },
      { id: 4, name: 'barfoo' }
    ]
  };
}]);

デモ: http://jsbin.com/EyuQ/2/

于 2013-08-26T09:08:44.687 に答える
1

これは次のように実行できます。

HTML

<div ng-app="myApp" ng-controller="BookingCtrl">
    <select ng-model="selected.Type" ng-options="s.Type for s in data">
        <option value="">-- Type --</option>
    </select>
    <select ng-model="selected.Books" ng-options="b.Books for b in selected.Type.Books">
        <option value="">-- Books --</option>
    </select>
    <select ng-model="selected.c" ng-options="f.c for f in selected.Type.cat">
        <option value="">-- Category --</option>
    </select>
</div>

JS

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'BookingCtrl', ['$scope', '$location', function ( $scope, $location ) {

    $scope.selected = {};

    $scope.data = [
        {
            "id" : "0",
            "Type" : "Study",
            "Books" : [
                { "Books" : "Study Book 1" },
                { "Books" : "Study Book 2" },
                { "Books" : "Study Book 3" }
            ],
            "cat" : [
                { "c" : "#1" },
                { "c" : "#2" },
                { "c" : "#3" }
            ]
        },{
            "id" : "1",
            "Type" : "General",
            "Books" : [
                { "Books" : "Book14" },
                { "Books" : "Book15" },
                { "Books" : "Book16" }
            ],
            "cat" : [
                { "c" : "#4" },
                { "c" : "#5" },
                { "c" : "#6" }
            ]
        }
    ];
}]);

このフィドルをチェックして、

http://jsfiddle.net/PXwrf/2/

于 2013-08-26T09:06:50.747 に答える