Question

我有一个<select>形式的其他字段，例如so-

<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:"..."}

的对象数组

当我“过渡到”此状态时，我像这样传递一个名称（也存在于adminNames中）-

$state.go('schedule',{name:response.name});

我希望在加载此模板时预先选择使用$scope.name访问的名称。

我尝试过这样的事情-
ng-init = "selectedName=adminNames[adminNames.indexOf(name)]"

我确实获得了自动填充的下拉菜单，但默认情况下未选择任何内容。

我浏览了所有其他有关选择默认选项的文章，但都没有提供有关使用$ scope变量进行预选择的信息。

请告知我是否需要提供更多信息/代码。提前致谢！

Answer 1

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

有关更多信息，请参见

AngularJS ng-options Directive API Reference

Answer 2

当我开始逐步调试时，发现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中预先选择默认选项

2 个答案: