为 Angular 中的选择和选项标签设置默认值答案

【问题标题】：Set default value for select and option tag in Angular为 Angular 中的选择和选项标签设置默认值
【发布时间】：2018-06-22 04:32:27
【问题描述】：

所以我有这样的角度代码

<select class="form-control" ng-model="ctrl.selectedProvider">
    <option value="">Please select a provider</option>
    <option ng-repeat="provider in ctrl.providers" ng-value={{provider.id}}>
        {{provider.description}}
    </option>
</select>

数据是这样的

providers = [{
     id: 1,
     description: provider1
},{
     id: 2,
     description: provider2
}]

如果 ctrl.providers 中只有一个元素，我想将 select 标记的默认值设置为该提供程序。否则，我想将其保留为“请选择提供商”并让用户选择他想要的提供商。我已经用谷歌搜索并找到了 ng-init，但我认为它对我的情况没有用。有任何想法吗？谢谢

【问题讨论】：

Setting default value in select drop-down using Angularjs 的可能重复项。
How to have a default option in Angular.js select box 的可能重复项。

标签： javascript angularjs

【解决方案1】：

我认为你所拥有的将起作用，只需要稍微调整你的代码：（下面的示例）

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var ctrl = this;
  // Uncomment to see result
  //ctrl.selectedProvider = null;
  //ctrl.selectedProvider = "";
  ctrl.selectedProvider = 1;
  //ctrl.selectedProvider = 2;
  
  ctrl.providers = [{
     id: 1,
     description: "provider1"
  },{
     id: 2,
     description: "provider2"
  }];
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as ctrl">
     <select class="form-control" ng-model="ctrl.selectedProvider">
      <option value="">Please select a provider</option>
      <option ng-repeat="provider in ctrl.providers" ng-value={{provider.id}}>
          {{provider.description}}
      </option>
    </select>
  </body>
</html>

【讨论】：

【解决方案2】：

使用ng-options 创建<option> 标签并检查数据长度以分配模型（如果适用）

angular.module('app', [])
  .controller('MainCtrl', function() {

    this.providers = [{
      id: 2,
      description: 'provider2'
    }];

    if (this.providers.length === 1) {
      this.selectedProvider = this.providers[0]
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<div ng-app="app" ng-controller="MainCtrl as ctrl">

  <select class="form-control" 
          ng-model="ctrl.selectedProvider" 
          ng-options="o.id as o.description for o in ctrl.providers track by o.id">
    <option value="">Please select a provider</option>        
  </select>

</div>

【讨论】：