Question

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

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

其中userType是第一个选择框的ng模型

我受到了我自己的试验的印象，这是不可能的（似乎是崩溃Chrome中的当前标签和firefox中的整个应用程序）。

最好的办法是什么？我有很多选择使用这种2选择框设置所以它会很好如果我可以避免复制和粘贴。

Answer 1

不要在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>

希望它有所帮助。

Answer 2

您可以按照以下方式执行此操作：

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/

Answer 3

取决于您的数据，它可能很简单：

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

with：

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/

如何在Angularjs中的ng-options表达式中使用函数和变量

3 个答案: