Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mc1">


    <label class="control-label">Semester:</label>
    <select ng-model="selectedSemesters" ng-change="selectedSemesterChanged()" class="form-control">
        <option value="{{v.SemesterId}}" ng-repeat="v in semesters">{{v.SemesterId}}</option>
    </select>
    <script>
        var app=angular.module('myApp',[]);
        app.controller('mc1',function($scope)
        {
            $scope.semesters='[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]';
        })
    </script>
</body>
</html>

当我运行此页面时，出现错误错误：[ngRepeat：dupes]。我试图通过$ index添加跟踪，但它完全不起作用。

谁能告诉我原因？

编辑：抱歉，我没有解释清楚。我在C＃中使用库将数据表对象转换为json字符串。然后通过web api将其传递到网页。在脚本中，我使用angular.jsonFrom（response.data）。

浏览器中的响应是“[{\”SemesterId \“：\”2017年秋季\“}，{\”SemesterId \“：\”2017年春季\“}]”。我已修复了这个错误，但我不知道为什么。

谢谢大家。 PS。接下来是正确答案。

<body ng-app="mySelect" ng-controller="myCt">
    <select ng-model="mySelected1">
        <option ng-repeat="x in data1">{{x.SemesterId}}</option>
    </select>    

    <select ng-model="mySelected2" ng-options="x.SemesterId for x in data1">{{x.SemesterId}}</select>

    <label ng-model="data1"></label>
    <script>
        var app = angular.module('mySelect', []);
        app.controller('myCt', ['$scope', function ($scope) {

             $scope.data1=angular.fromJson('[{\"SemesterId\":\"Fall 2017\"},{\"SemesterId\":\"Spring 2017\"}]');
        }]);

    </script>
</body>

Answer 1

您正在传递字符串而不是数组。因此ng-repeat在迭代时显示错误。改变下面的行;

$scope.semesters='[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]';

要

$scope.semesters=[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}];

JSFiddle Demo

Answer 2

请参阅此Plunkr工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mc1">


    <label class="control-label">Semester:</label>
    <select ng-model="selectedSemesters" ng-change="selectedSemesterChanged()" class="form-control">
        <option value="v.SemesterId" ng-repeat="v in semesters track by $index">{{v.SemesterId}}</option>
    </select>
    <script>
        var app=angular.module('myApp',[]);
        app.controller('mc1',function($scope)
        {
            $scope.semesters=[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}];
        })
    </script>
</body>
</html>

https://jsbin.com/fuvihatihi/1/edit?html,output

在semester变量中没有重复，因为数组声明周围有引号。

AngularJS 1.6.6 ng-repeat

2 个答案: