时间戳

首页 > 解决方案 > 如何使用 $scope 变量在 ng-options 中预先选择默认选项

angularjs - 如何使用 $scope 变量在 ng-options 中预先选择默认选项

问题描述

我有一个<select>带有其他字段的表格，就像这样-

<form class="formCSS">
  <div class="inputs">
   <label class="labelTag">Name *: &nbsp&nbsp</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 变量进行预选的信息。

如果我需要提供更多信息/代码，请告诉我。提前致谢！

标签： angularjsselectangularjs-scopeng-optionsng-init

解决方案

使用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>

演示

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>

有关详细信息，请参阅

推荐阅读