在Angularjs动态选择器中设置初始默认值答案

【问题标题】：Set initial default value in Angularjs dynamic selector在Angularjs动态选择器中设置初始默认值
【发布时间】：2016-02-24 18:19:17
【问题描述】：

有谁知道如何在 Angularjs Select 中设置初始默认选项？

下面的“myMapByCmd”是一个

 LinkedHashMap<String, List<String>>

因此项目中的“值”作为 $index 的值跟踪中的项目的项目是List<String>。
如果我从后端将“选择值”放在列表的第一个位置，则选择器最初会显示/选择列表中的最后一项。

必须有一个简单的方法来做到这一点（该死的 Angular 太复杂了！）

        <table> 
                        <tr ng-repeat="(key,value) in myMapByCmd">
                        <td><label>{{key}} Title:</label></td>

                        <td>
                            <select name="my_val_sel"
                                    ng-init="mycommand.myValue[$index] = value[0]"
                                    ng-model="mycommand.myValue[$index]"
                                    ng-options="item as item for item in value track by $index"                                     
                                    ng-change="changeMyValue()">
                            </select>
                        </td>               
                    </tr>    
            </table>

如果我这样做，它会显示最后且未选中...

     <select name="my_val_sel" ng-model="mycommand.myValue[$index]"
     ng-options="item as item for item in value track by $index" 
    ng-change="changeMyValue()">
  <option value="" ng-selected="selected">FACK</option>
 </select>

myMapByCmd JSON 看起来像： { “一”： [ “我的唯一”， “我的两个”， “我的三个” ] }

谢谢！

【问题讨论】：

在选择属性中添加一个选项标签。即
如果我这样做，它会显示最后且未选中...

标签： angularjs drop-down-menu

【解决方案1】：

基于它使用的数据，我创建了演示here。如果数据格式相同，并且您正在寻找相似的结果，则无需使用 $index 跟踪。

HTML

<div ng-app="myApp" ng-controller="myCtrl">

<table> 
                        <tr ng-repeat="(key,value) in myMapByCmd">
                        <td><label>{{key}} Title:</label></td>

                        <td>
                            <select name="my_val_sel"
                                    ng-init="mycommand.myValue[$index] = value[0]"
                                    ng-model="mycommand.myValue[$index]"
                                    ng-options="item as item for item in value"   
                                    ng-change="changeMyValue()">
                            </select>
                        </td>               
                    </tr>    
            </table>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {

  $scope.myMapByCmd = { "ONE": [ "my-one", "my-two", "my-three" ],                                              
                        "TWO": [ "my-one", "my-two", "my-three" ],
                        "THREE": [ "my-one", "my-two", "my-three" ]}
}]);

【讨论】：

恭喜！你是赢家 :) 那是有效的。我将第一个选项加载为默认选项，ng-init 如上所述选择它。谢谢一百万！
很高兴能帮到你！

【解决方案2】：

在选择元素内添加一个空值选项。 JsFiddle

 <select ng-options="...">
     <option value="">Select Value</option>
 </select>

【讨论】：

这对选择填充不起作用，并且最后一个项目被列表顶部的“选择值”选中。

【解决方案3】：

作为一个例子，这是我使用的：

<select
    ng-model="record.id"
    ng-options="obj.id as obj.name for obj in page_list"
>
     <option ng-show="record.id == 0" 
          value="">-- Choose Page --
     </option>
</select>

JSFiddle

【讨论】：

对于不完整的解决方案，我深表歉意。这是JSFiddle。请注意，使用此解决方案可防止“选择页面”在选择项目后再次出现。

【解决方案4】：

未来的读者试试这个

<select ng-model="sel.myvar" ng-options="opt.label for opt in sel.myoptions">
    <option value="">-- choose an option --</option>
</select>

更多详情请参考here。

【讨论】：