ng-init 没有在 ng-options 中设置第一个 select 选项

Question

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

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;

Answer 1

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

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

如果可能，不应使用

ng-init - https://docs.angularjs.org/api/ng/directive/ngInit.

Answer 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

Answer 3

基于给定的代码，我创建了小型工作演示 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;

});

Answer 4

我看到两个错误：

您使用的 ngInit 不正确。它不指定 ngModel 指令的初始绑定，它是一个在范围初始化后根据范围计算的表达式。要指定初始模型绑定，您需要
```
<select ng-init="lossGainProb = EventDetails.lossGainProb"></select>
```
另一种（更好的）方法是直接在控制器中指定它，例如
```
$scope.lossGainProb = $scope.EventDetails.lossGainProb;
```
您的 ngModel 绑定到整个 "possibility" 对象，而不仅仅是 value 属性。我假设您只希望 value 成为您的模型值。在这种情况下，您应该将 ngOptions 设置为
```
<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。

Answer 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>

ng-init 没有在 ng-options 中设置第一个 select 选项

ng-init not setting first select options in ng-options

javascript

forms

html-select

angularjs

HTML

JavaScript