0

我有 2 个选择框，一个用于选择用户类型（例如组或个人），第二个用于输出第一个用于显示选择用户/组的选项。无论如何，在我的表达式中ng-options我可以传递一个函数而不是像这样的变量：

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

其中 userType 是第一个选择框的 ng-model

我自己的试验给我的印象是这是不可能的（似乎会使 chrome 中的当前选项卡和 Firefox 中的整个应用程序崩溃）。

什么是最好的方法。我有很多选择使用这种 2 选择框设置，所以如果我可以避免复制和粘贴，那就太好了。

4

3 回答 3

2

与其在 ng-options 中使用函数，不如试试这个；

在你的第一个选择框中使用ng-change这样的指令；

<select ng-options="user.id as user.description for user in firstSelect" ng-model="firstSelectBox" ng-change="change();"></select>

在您的控制器中；

$scope.firstSelect=[{values of first select box}]

$scope.change = function(){
$value = $scope.firstSelectBox;
$http.get('API url').success(function (data) {
$scope.secondSelect = data;
});
}

将您的第二个选择框更改为；

<select ng-options="user.id as user.description for user in secondSelect" ng-model="secondSelectBox"></select>

希望能帮助到你。

于 2013-08-26T08:52:27.293 回答
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 回答
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 回答