如何使用$ scope变量在ng-options中预先选择默认选项
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用$ scope变量在ng-options中预先选择默认选项相关的知识，希望对你有一定的参考价值。
我有一个与其他领域的形式的<select>，如此 -
<form class="formCSS">
<div class="inputs">
<label class="labelTag">Name *:   </label>
<select class="inputTag" ng-model="selectedName"
ng-options="n.name for n in adminNames"></select>
</div>
</form>
adminChannels是这种结构的对象数组{_id:"....", name:"..."}
当我“transitionTo”这个状态时，我传递一个名字（也存在于adminNames中），就像这样 -
$state.go('schedule',{name:response.name});
我希望在加载此模板时预先选择所述名称（使用$scope.name访问）。
我尝试过这样的事情 -
ng-init = "selectedName=adminNames[adminNames.indexOf(name)]"
我确实得到了自动填充的下拉菜单，但没有选择任何默认值。
我浏览了有关选择默认选项的所有其他帖子，其中没有一个提供有关使用$ scope变量进行预选的信息。
如果我要提供更多信息/代码，请告诉我。提前致谢！
使用Array.find()：
$scope.selectedName = $scope.adminNames.find( x => (x.name == $scope.name));
find()方法返回数组中第一个满足提供的测试函数的元素的值。
另一种方法是在as指令中使用ng-options子句：
<select class="inputTag" ng-model="selectedName"
ng-options="n.name as n.name for n in adminNames">
</select>
DEMO
angular.module("app",[])
.controller("ctrl",function($scope) {
$scope.adminNames=[
{name: "fred"},
{name: "jane"},
{name: "sally"},
];
$scope.selectedName="jane";
$scope.find = function(name) {
return $scope.adminNames.find( x => (x.name == name));
};
});<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select class="inputTag" ng-model="selectedName"
ng-options="n.name as n.name for n in adminNames">
</select>
<br>
object = {{find(selectedName)}}
</body>当我逐步开始调试时，我看到adminNames[adminNames.indexOf(name)]是“未定义的”。
所以我在控制器中这样做，找到收到的$ scope.name的索引 -
var index = $scope.adminNames.map(function(e)
{ return e.name; }).indexOf($scope.name);
$scope.selectedName = $scope.adminNames[index];
这个SO question/answer帮我解决了这个问题。
以上是关于如何使用$ scope变量在ng-options中预先选择默认选项的主要内容，如果未能解决你的问题，请参考以下文章
angularjs的ng-options时如何设置默认值(初始值)
使用 AngularJS 的 ng-options 进行选择