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

Question

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

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

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

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

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

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> 标签中

Answer 1

在 ng-options 中执行此操作

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

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

这是经过一些更改后的 plunker 版本：

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

Answer 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>

`

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

Selecting default value for ng-options in Angular

default

angularjs

drop-down-menu

ng-options

angular-ngmodel