在 ng-repeat Angularjs 中重复选择选项答案

【问题标题】：repeat Select option in ng-repeat Angularjs在 ng-repeat Angularjs 中重复选择选项
【发布时间】：2015-10-19 11:29:52
【问题描述】：

我有一个在 ng-repeat 中重复选择选项的表单。在这种形式中，我想为选择元素选择默认值。事实上，在第一个选择元素中选择的值是“n1”，而在第二个选择元素中选择的值是“n2”。而在拖曳选择元素默认值为“n2”。我的问题是什么？

function MyCntrl($scope) {
    $scope.data = {
        orders: [{ s:'' }]
    };

    $scope.list = [1,2];
    $scope.data.orders[0] = "n1";
    $scope.data.orders[1] = "n2";
    $scope.sizes = [ {code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
    $scope.update = function() {
        console.log($scope.item.code, $scope.item.name)
    }
}

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MyCntrl">
        <div ng-repeat="l in list track by $index">
            <select ng-model="data.orders[$index]" ng-change="update()">
                <option ng-selected ="data.orders[$index] == size.name" ng-repeat="size in sizes">
                    {{size.name}}
                </option>
            </select>
        </div>
        <select ng-model="data.orders[0]" ng-change="update()">
            <option ng-selected ="data.orders[0] == size.name" ng-repeat="size in sizes">
                {{size.name}}
            </option>
        </select>
        <select ng-model="data.orders[1]" ng-change="update()">
            <option ng-selected ="data.orders[1] == size.name" ng-repeat="size in sizes">
                {{size.name}}
            </option>
        </select>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

试试这个代码。它使用$parent.$index 而不是$index。

ng-repeat 默认由$index 跟踪，因此无需指定。

这会导致您的内部循环出现问题，$index 也在跟踪该问题。当你在内部循环中说 $index 时，它会选择内部循环索引，该索引总是会评估为真。

function MyCntrl($scope) {
    $scope.data = {
        orders:[{ s:'' }]
    };
    $scope.list = [1,2];
    $scope.data.orders[0] = "n1";
    $scope.data.orders[1] = "n2";
    $scope.sizes = [{code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
    $scope.update = function() {
        console.log($scope.item.code, $scope.item.name)
    }
}

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MyCntrl">
        <div ng-repeat="l in list track by $index">
            <select ng-model="data.orders[$index]" ng-change="update()">
                <option ng-selected ="data.orders[$parent.$index] == size.name" ng-repeat="size in sizes">
                    {{size.name}}
                </option>
            </select>
        </div>
    </div>
</body>
</html>

【讨论】：

我想对ng-repeat tracks by $index by default 的说法发表评论，这是错误的。默认为track by $id(obj)。前者按顺序跟踪（如果您想在阵列中移动东西，则很脆弱）。后者按身份进行跟踪，并为每个项目提供一个 $$hasKey 以将它们分开。如果您想在数组中允许重复项，或者如果您确定永远不会触及数组顺序，则通过 $index 进行跟踪可能是一个好主意。