ng-init 未在 ng-options 中设置第一个选择选项答案

【问题标题】：ng-init not setting first select options in ng-optionsng-init 未在 ng-options 中设置第一个选择选项
【发布时间】：2016-02-25 19:16:34
【问题描述】：

我有一个简单的选择元素，我正在尝试初始化该值，但由于某种原因它失败了，即没有获取初始值

HTML

<select class="select-form-control"
    ng-model="lossGainProb"
    ng-options="item.display for item in possibility track by item.value" 
    ng-init="EventDetails.lossGainProb">

JavaScript

$scope.possibility = [{
    display: '0%',
    value: 0
}, {
    display: '5%',
    value: 5
}];

$scope.EventDetails.lossGainProb = 5;

【问题讨论】：

尝试设置$scope.EventDetails.lossGainProb = { value: 5 };，然后设置ng-model="EventDetails.lossGainProb"。
但是我按item.value添加了track，这不应该照顾它并且不必获取value属性吗？
不； track by 仅指定选项的 value 属性。你也可以选择$scope.eventDetails.lossGainProb = $scope.possiblity[1];，但这基本上是一样的。
不管我都试过了还是不行

标签： javascript angularjs forms html-select

【解决方案1】：

基于给定的代码，我创建了小型工作演示 here

<div ng-app="myApp" ng-controller="myCtrl">    
<select class="select-form-control" ng-model="lossGainProb" 
  ng-options="item.value as item.display for item in possibility">
</select>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
       $scope.possibility =[ {
            display : '0%',
            value : 0
        }, {
            display : '5%',
            value : 5
        }];

    $scope.lossGainProb = $scope.possibility[1].value;

});

【讨论】：

【解决方案2】：

您需要 angular 跟踪的列表的跟踪项。试试这个：

$scope.possibility = [{
    display: '0%',
    value: 0
}, {
    display: '5%',
    value: 5
}];

$scope.EventDetails.lossGainProb = $scope.possibility.filter(function(item){ return item.value === 5})[0];

工作密码笔http://codepen.io/gpincheiraa/pen/bpbMom

【讨论】：

【解决方案3】：

我看到了两个错误：

您错误地使用了ngInit。它没有为ngModel 指令指定初始绑定，它是一个在作用域初始化后针对作用域求值的表达式。要指定初始模型绑定，您需要类似
```
<select ng-init="lossGainProb = EventDetails.lossGainProb"></select>
```
另一种（更好的）方法是直接在控制器中指定它，例如
```
$scope.lossGainProb = $scope.EventDetails.lossGainProb;
```
您的ngModel 绑定到整个“可能性”对象，而不仅仅是value 属性。我假设您只希望 value 成为您的模型值。在这种情况下，你应该设置ngOptionslike
```
<select ng-options="item.value as item.display for item in possibility"></select>
```
这指定ngModel 应绑定到item.value，item.display 用作标签。

将这些放在一起，您的select 应该看起来像

<select class="select-form-control"
    ng-model="lossGainProb"
    ng-options="item.value as item.display for item in possibility"
    ng-init="lossGainProb = EventDetails.lossGainProb">
</select>

Here 是一个工作的 Plunker。

【讨论】：

仍然不适合我，完全相同的代码在这个 plunker 中工作，您知道还有其他调试方式吗？
你能发布一个重现错误的可运行示例吗？
没有相同的不工作，这就是为什么我问是否有任何方法来调试问题
在 Plunker 中，我在模板中添加了 {{ lossGainProb }}，以便我可以看到当前的绑定。你也可以在上面加上$watch。无论如何，我鼓励您提供有关您的设置的更多详细信息。显然，您的情况有所不同。
绑定值完全相同，但下拉列表中仍未选择值。我的设置简单页面真的没什么特别的

【解决方案4】：

这将在不使用 ng-init 的情况下工作 - 在控制器中初始化：

$scope.lossGainProb = {};
$scope.lossGainProb.value = 5;

如果可能，不应使用ng-init - https://docs.angularjs.org/api/ng/directive/ngInit。

【讨论】：

您的编辑也不起作用。要正确绑定初始值，它必须与选项值之一相同 (===)。你需要做类似$scope.lossGainProb = $scope.possibility[0]的事情。
它确实有效，我在 plunker 中测试过。让我找到它。
哎呀，你是对的，track by 会处理这个问题。对不起！

【解决方案5】：

另一种方法是：

<select class="select-form-control" ng-init="lossGainProb = possibility[1].value" ng-model="lossGainProb" ng-options="item.value as item.display for item in possibility"> </select>

【讨论】：