AngularJS选择选项初始化

Question

我有这个选择标签：

<select class="form-control" data-ng-model="contact.title" data-ng-options="title.title as title.title for title in titles track by title.title">
    <option></option>
</select>

当我编辑标题时，没有选择任何内容，但 contact.title 是 Mag。。因此，应选择 Mag。。有谁知道我要做什么才能让Mag。被选中了？

Answer 1

为我工作的代码：

<select class="form-control" data-ng-model="contact" data-ng-options="title.title for title in titles track by title.title">
  <option></option>
</select>

在控制器中：

$scope.titles = [{title: "abc"}, {title: "pqr"}, {title: "xyz"}];
$scope.contact = $scope.titles[0];

试试这个。

Answer 2

试试这个：

<select name="repeatSelect" id="repeatSelect" ng-model="contact.title">
      <option ng-repeat="title in titles" value="{{title.title}}">{{title.title}}  </option>
</select>

和

{{1}}

Answer 3

使用ng-init指令在select中有一个默认选项。你可以使用类似的东西：

HTML：

<select ng-init="contact.title = titles[0]"
        ng-model="contact.title"
        ng-options="title.title for title in titles">
</select>

JS：

$scope.titles = [{title: "Title A"}, {title: "Title B"}, {title: "Title C"}];

Answer 4

从我在jsfiddle中找到的修补方法来看，'track by'是不必要的。 请尝试删除它。

<select class="form-control" data-ng-model="contact.title" 
    data-ng-options="title.title as title.title for title in titles">
<option></option>
</select>

将'track by'部分更改为$ index或其他值会更改选择。如果您确定所有标题都是唯一的，最好不要使用它。

Answer 5

TL;博士

在控制器中为联系人的模型设置初始值，将选择列表的 ng-model 属性更改为联系人和将 ng-options 更新为data-ng-options="title as title.title for title in titles"。

选择＆＃34; Mag。＆＃34;

  

有没有人知道我必须做什么才能让Mag。被选中了？

为了选择 Mag。（标题列表中的第一项，请确保控制器中的属性 contact 设置为第一个元素标题数组（即$scope.contact = $scope.titles[0];）。另外，将选择的 ng-model 属性从 contact.title 更改为联系人

ngOptions表达式语法

另外，请查看ngOptions的参数部分下的 comprehension_expression 的语法。 titles 数据源是一个数组，因此在数组数据源下，我们有一个类似这种格式的表达式：

  

选择作为标签 数据

选择的值不应与标签相同。因此，请更新 ng-options 属性，如下所示：

data-ng-options="title as title.title for title in titles track by title.title"

正如已经提到的那样， track by 子句是不必要的。如果我们需要考虑不同的属性（例如名为 id 的整数），将会很有用。因此， ng-options 属性可以简化为：

data-ng-options="title as title.title for title in titles"

实施例

请参阅下面的代码段中演示的内容：

＆＃13;

＆＃13;

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.titles = [{
      title: "Mag."
    }, {
      title: "Mag.(FH)"
    }, {
      title: "Mag. Dr."
    }, {
      title: "Dr."
    }];
    $scope.contact = $scope.titles[0];
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select class="form-control" data-ng-model="contact" data-ng-options="title as title.title for title in titles">
  </select>
  <div>Contact.title: <span ng-bind="contact.title"></span></div>
</div>

＆＃13;

＆＃13;

＆＃13;

避免 ngInit

有人建议使用ng-init来设置初始值，但是，ngInit的文档中有关于此的说明：

  

可以滥用此指令将不必要的逻辑量添加到模板中。 ngInit 只有少数适​​当的用途，例如用于别名 ngRepeat 的特殊属性，如下面的演示所示;并通过服务器端脚本注入数据。除了这几种情况，您应该使用controllers而不是 ngInit 来初始化范围上的值。 ¹

这是因为（控制器）的用途之一是：

  

设置$scope对象的初始状态。 ²

这样的业务逻辑不应该添加模板。