javascript - ng-options 和 ng-model 预选值

Question

我正在尝试使用 ng-options 预选择值。这是什么

 <select ng-model="promocode.PRODUCT" ng-change="getSomething()" ng-options="product as product.NAME for product in products">

问题出在默认值选择上。我有与 ng-options 中相同的 promocode.PRODUCT 对象，但 Angular 将默认值设置为空。

我的错误在哪里？

Answer 1

假设您的产品具有某种 id 属性，这应该可以解决问题:

 <select ng-model="promocode.PRODUCT"
    ng-change="getSomething()"
    ng-options="product as product.NAME for product in products track by product.id">

track by Product.id 告诉 Angular 通过其 id 属性来比较数组项，而不是比较对象之间的相等性。

以下是有关 tracking / ng-options 的更多信息.

还有一个工作示例:

var myApp = angular.module('myApp', []);
myApp.controller("controller", function($scope) {
  $scope.products = [{
    id: 1,
    name: 'FirstProduct'
  }, {
    id: 2,
    name: 'SecondProduct'
  }];

  $scope.promocode = {
    product: { // Here I am using a placeholder product to illustrate that 
      id: 2    // the select is identifying the correct row by it's `id`.
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="controller">
  <select ng-model="promocode.product" ng-change="getSomething()" ng-options="product as product.name for product in products track by product.id">
  </select>
  <br/>
  {{promocode.product}}
</div>

更好的选择是选择正确的行，如下所示:

$scope.promocode = $scope.products[1];

这样您就不必复制任何数据。