在 Angular 中为 ng-options 选择默认值答案

【问题标题】：Selecting default value for ng-options in Angular在 Angular 中为 ng-options 选择默认值
【发布时间】：2016-08-01 23:05:45
【问题描述】：

我有两个下拉菜单，一个依赖于另一个。我最初使用 ng-repeat 编写代码，但读到使用 ng-options 更有效。但是，在切换时，我不能再使用 ng-selected 作为默认值。

我查看了在 ng-options 中设置默认选项的不同方法，但他们使用 <option value="">Select Something Here</option> 自定义选项或直接从数据集中选择。但是我的价值会发生变化。

这是一个使用 ng-repeat 的工作 plunker：

http://plnkr.co/edit/Ie4VDDlrwSUSqIq7laoa?p=preview

这是一个使用 ng-option 缺少默认值的 plunker：

http://plnkr.co/edit/TGoWTMqOuJnWKNTUARWI?p=preview

默认值应该是$scope.defnum，它取自与我的下拉列表中的值不同的数据集，所以我想要默认的DefCom = defnum。我已经尝试通过在控制器中分配一个原始变量来使用 ng-init：

 $scope.defcom = 4;
 var original_defcom = $scope.defcom;

并在模板中使用ng-init="original_defcom"。

在 ng-model 中，甚至将其包装在 <option> 标签中

【问题讨论】：

标签： angularjs drop-down-menu default angular-ngmodel ng-options

【解决方案1】：

在 ng-options 中执行此操作

<select ng-model="defcom"
    ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >
</select>

然后，您必须更改 de $scope.defcom 类型以匹配数组。在 plunker 中，变量是一个数字，数组中充满了字符串。你必须改变其中之一。如果我在哪里，我会更改数组中对象的属性类型。 ng-options 会自动解析数字。

这是你的 plunker 的一个版本，经过一些更改：

http://plnkr.co/edit/tIeDEC8MxfcvnRrc0Njh?p=preview

【讨论】：

【解决方案2】：

像这样试试。

并更改为：$scope.defcom = "4";

 <select ng-model="defcom" ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >>

// Code goes here

angular.module("app", [])
  .controller("MainCtrl", function($scope) {
    $scope.test = "This is a test";
    $scope.defcom = "4";
    var original_defcom = $scope.defcom;
    var original_com = $scope.com;
    
    $scope.acct_info = [
      {
        "Req": "MUST",
        "DefCom": "1"
      },
      {
        "Req": "NoMUST",
        "DefCom": "5"
      },
      {
        "Req": "MUST",
        "DefCom": "4"
      },
      {
        "Req": "MUST",
        "DefCom": "7"
      }
    ];
    
    $scope.cust_info = [
      {
        "Customer": "1",
        "Com": "1"
      },
      {
        "Customer": "2",
        "Com": "1"
      },
      {
        "Customer": "3",
        "Com": "4"
      },
      {
        "Customer": "4",
        "Com": "4"
      },
      {
        "Customer": "5",
        "Com": "7"
      },
      {
        "Customer": "6",
        "Com": "7"
      },
      {
        "Customer": "7",
        "Com": "7"
      }
    ];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <h1>Hello Plunker!</h1>
    <div ng-controller="MainCtrl">
      <p>{{ test }}</p>
      <select ng-model="defcom" ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >>
  </select>
  
    </div>
  </div>

【讨论】：