使用 ng-options 在 select 框中预先 selected 默认值

Default value pre-selected in select box with ng-options

我正在尝试使用 ng-options 在我的 select 框中获取默认值 selected(来自数据库)。

我的观点

<select class="form-control samlength modalinput" 
        ng-options="p.procid as p.procname for p in processes track by p.procid" 
        ng-model="p.procid">
  <option value="">-- choose an option --</option>
</select>

其中 p.procid 是从数据库收到的值。

我的数据

procid  procname    time
    1   MyProcess   2018-05-30 13:34:54.097 3003162
    3   Testing     2018-05-31 18:31:32.467 3003162

如果 selected procid 是 3,我怎样才能让它默认为 selected?

仅供参考 - 我尝试了其他线程中给出的多个答案。我也试过 ng-init 但没有任何帮助。

将您的 html 代码更新为:

<select ng-model="processSelected" 
     ng-options="p.procname for p in processes track by p.procid">
</select>

然后在控制器中将您的模型值初始化为:

$scope.processSelected = $scope.processes[1];

其中 $scope.processes 是一个进程对象数组。

Plunker Example

您可以将 HTML 保留为:

<select class="form-control samlength modalinput" 
        ng-options="p.procid as p.procname for p in processes track by p.procid" 
        ng-model="selectedProcess">
  <option value="">-- choose an option --</option>
</select>

现在,如果我们需要 select 数组中的特定对象。我们可以通过遍历数组并比较给定键的值来做到这一点:

function functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
    for (var i = 0; i < arraytosearch.length; i++) {
      if (arraytosearch[i][key] == valuetosearch) {
        return i;
      }
    }
    return null;
  }

调用此函数为:

var index = functiontofindIndexByKeyValue($scope.processes, "procid", procid);
$scope.selectedProcess = $scope.processes[index];
alert(index);

希望有用!