使用 angularjs 在下拉列表中有一个默认项

Question

我有这个非常好用的 html。我的 topicId 显示从 0 到 7，0 是第一项。 但是，当页面加载时，我的下拉列表中没有任何内容显示为默认值，直到我单击下拉列表。

我希望第一项显示为默认值。请问我怎样才能做到这一点？

        <div class="selectTopic">
            <select id="cTopic" name="cTopic" ng-model="selectedValue">
                <option ng-repeat="x in cuc.getData" value="{{x.topicId}}"> {{x.topicDescription}}</option> 
            </select>
        </div>

Answer 1

您应该改用 ngOptions。然后通过控制器将模型初始化为默认值：

<select id="cTopic" name="cTopic" ng-model="selectedValue" 
    ng-options="item.topicId as item.topicDescription for item in cuc.getData">
</select>

在控制器中：

$scope.selectedValue = "topicId1";

查看示例：

var app = angular.module('TestApp', []);

app.controller("testCtrl", function ($scope) {
	
  $scope.selectedValue = "topicId1";
  $scope.items = [
    {
      topicId : "topicId1",
      topicDescription :"topicDescription1"
    },
    {
      topicId : "topicId2",
      topicDescription : "topicDescription2"
    },
    {
      topicId : "topicId3",
      topicDescription  : "topicDescription3"
    }
  ];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="TestApp" ng-controller="testCtrl">
    <div class="selectTopic">
        <select id="cTopic" name="cTopic" ng-model="selectedValue" ng-options="item.topicId as item.topicDescription for item in items">
        </select>
    </div>
</div>

Answer 2

你需要使用 ng-selected: https://docs.angularjs.org/api/ng/directive/ngSelected

 <div class="selectTopic">
    <select id="cTopic" name="cTopic" ng-model="selectedValue">
        <option ng-repeat="x in cuc.getData" value="{{x.topicId}}" 
            ng-selected="selectedValue === x.topicId"> 
            {{x.topicDescription}}
        </option> 
    </select>
 </div>

但是，如果您使用纯 html，AngularJS 有更有效的方法来创建下拉菜单，请参阅：https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 3

建议的答案也可以，但是我倾向于使用的替代方法是：

<div class="selectTopic">
<select id="cTopic" name="cTopic" ng-model="selectedValue" ng-options="x.topicId as x.topicDescription for x in cuc.getData">
    <option value="">Select One ...</option> 
</select>

Angular 必须从一些未初始化的选择开始，因此在 html 中提供一个空白选项可以安全地初始化选择，而无需代表您的用户做出假设。