javascript - 对 ng-options 的使用感到困惑。

Question

我对 ng-options 有以下困惑。我已经从数组中构建了一个下拉列表位于我的 Controller 中。这是我的 html 代码:

<div ng-app>
<div ng-controller="testCtrl">
    <select multiple="multiple" ng-model="first" ng-options="c.name for c in listObj">
    </select>
    <select multiple="multiple" ng-model="second">
    </select>
    <hr/>
    {{first}}
</div>
</div>

这是我的 JavaScript:

function testCtrl($scope) {
    $scope.listObj = [{name: "x", content: [1,2,3]},
                      {name: "y", content: [4,5,6]}];

}

这是有效的 jsFiddle:

http://jsfiddle.net/zono/rkBUL/10/

当用户从左侧选择元素时(使用选定的 CTRL)我想要右边选择要填充的内容属性。例如:

当用户选择左边的 x 时，将是 1,2,3。当向左添加y时将是1,2,3,4,5,6。当取消选择 x - 4,5,6.

最好的问候。

Answer 1

如果你不想依赖 $watch正如 @package 所建议的那样，您可以在 Controller 中使用辅助函数来解压缩 content 的每个单独值, 对于 listObj 中的每个选定项目, 到 ng-options 的数组中你的第二个<select> .

$scope.contents = function(arr) {
    var values = [];
    if (angular.isDefined(arr)) {
        arr.forEach(function(v) {
            values = values.concat(v.content);
        });
    }
    return values;
};

然后:

ng-options="c for c in contents(first)"

这是一个演示 JSFiddle .