Question

我正在使用AngularJS。我正在尝试使用响应中显示的值绑定下拉列表。但我无法设置所选数据。它始终显示默认值。下面是index.cshtml：

<div class="col-sm-4">
   <select name="CopyseasonTypeSelect" ng-model="CopyselectedSeasonType" ng-options="CopySeason.SeasonTypeName for CopySeason in seasons">
        <option value="">-- Select the Season --</option>
   </select>
</div>

在controller.js

中

testAPIService.getSeasonById(nId).success(function(response) {
    $scope.seasonByIdReponse = response;
    $scope.CopyselectedSeasonType = response.SeasonType;  // I am getting "Summer"
            $scope.init();        
    });
}

下拉列表的值为“ - 选择季节 - ”，“冬季”，“夏季”，“春天”

对象数组如下：

[object Object],[object Object],[object Object],[object Object]
   [
      0: {
         [functions]: ,
         $$hashKey: "object:78",
         __proto__: { },
         Id: 1,
         ImageUrl: "testicon.png",
         SeasonDetail: null,
         SeasonTypeName: "Winter"
      },
      1: { },
      2: { },
      3: { },
      length: 4
   ]

如何在服务的下拉列表中设置值？

Answer 1

<select name="CopyseasonTypeSelect" 
        ng-model="CopyselectedSeasonType" 
        ng-options="i.SeasonTypeName as i.SeasonTypeName for i in seasons">
    <option value="" style="display: none">-- Select the Season --</option>
</select>

Answer 2

试试这个。使用track by中的ng-options进行初始化

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <select name="CopyseasonTypeSelect" ng-model="CopyselectedSeasonType" ng-options="CopySeason.SeasonTypeName for CopySeason in seasons track by CopySeason.Id">
            <option value="">-- Select the Season --</option>
        </select>
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.seasons = [{
                    SeasonTypeName: "Winter",
                    Id: 0
                },
                {
                    SeasonTypeName: "Summer",
                    Id: 1
                }, 
                {
                    SeasonTypeName: "Spring",
                    Id: 2
            }];
            
            $scope.CopyselectedSeasonType = $scope.seasons[1];
        });
    </script>

</body>

</html>

在AngularJS的下拉列表中设置Selectedvalue

2 个答案: