Question

我对ng-options有以下困惑。我已经从数组中构建了一个下拉列表位于我的控制器中。这是我的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）我想要右边选择填充corespondign内容属性。例如：

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

祝你好运。

Answer 1

您必须$watch first，当它发生变化时，将所有选定值的内容读入新数组，我们将其称为firstContent。第二个select会显示来自firstContent的项目。此处的代码来自更新的fiddle：

<select multiple="multiple" ng-model="first" ng-options="c.name for c in listObj">
</select>
<select multiple="multiple" ng-model="second" ng-options="element for element in firstContent">
</select>


$scope.$watch('first', function(value) {
    if (!value) {
        return;
    }
    var firstContent = [];
    for (var i = 0; i < value.length; i++) {
        firstContent = firstContent.concat(value[i].content);
    }
    $scope.firstContent = firstContent;
});

Answer 2

如果您不想依赖@package建议的$watch，您可以在控制器中使用辅助函数来解压每个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。

关于使用ng-options的困惑。

2 个答案: