Question

我有一个对象

    $scope.colleges = [{"CollegeCode":"40","CollegeName":"College1"},
{"CollegeCode":"35","CollegeName":"College2"},
{"CollegeCode":"32","CollegeName":"College3"},
{"CollegeCode":"15","CollegeName":"College4"}]

我正在使用它的内容填充select元素

<select ng-model="collegeSelection" ng-options="c as c.CollegeName for c in colleges" name="selectCollege"></select>

它在页面上呈现如此

<select class="ng-pristine ng-valid" name="selectCollege" ng-options="c as c.CollegeName for c in colleges" ng-model="collegeSelection" style="" selected="selected">
<option value="?" selected="selected"></option>
<option value="0">College1</option>
<option value="1">College2</option>
<option value="2">College3</option>
<option value="3">College4</option>
etc....

我也将这个选择绑定到collegeSelection，当选择一个项目时，该对象看起来像这样

$scope.collegeSelection = {"CollegeCode":"32","CollegeName":"College"}

当有人点击页面上的编辑时，默认选择的大学来自userToUpdate对象。

$scope.userToUpdate = {
            Id: 1,
            FirstName: 'John',
            LastName: 'Doe',
            CollegeCode: '35,
            CollegeName: 'College2',
            Active: true
        };

当填充编辑按钮和userToUpdate对象时，我希望select元素中的学院设置为用户对象中的学院。怎么能让这件事发生？仅供参考，渲染选择中的值与CollegeCode不匹配。看起来angular使用了来自大学对象的索引。感谢

Answer 1

试试这个

<select ng-model="collegeSelection" ng-options="c.CollegeCode as c.CollegeName for c in colleges" name="selectCollege"></select>
    <span>{{collegeSelection}}</span>
    <input type="button" ng-click="switch()" name="switch" value="switch" />
    <script>
        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function ($scope, $filter) {
            $scope.colleges = [{ "CollegeCode": "40", "CollegeName": "College1" },
                                { "CollegeCode": "35", "CollegeName": "College2" },
                                { "CollegeCode": "32", "CollegeName": "College3" },
                                { "CollegeCode": "15", "CollegeName": "College4" }
            ]

            $scope.switch = function () {
                $scope.collegeSelection = "32";
            };
        });

如何在Angular中为select选择设置选定的选项

1 个答案: