Question

我有一个产品模型，它具有我想要绑定到单独的选项数组的属性。基本上，产品模型有一个名为＆＃39; category＆＃39;的属性，如下所示：

productModel = {
  Id : 1,
  Description: 'Widget',
  Category: 0,
  ...

正如您所看到的，该属性是一个int（来自数据库），但我也得到了一个单独的类别数组：

Categories : [
  { "Number" : 0, Name : "N/A" },
  { "Number" : 1, Name : "Option 1" },
  { "Number" : 2, Name : "Option 2" }
]

我希望能够有一个显示相应值的选择列表，因此如果产品型号返回0设置，则选择列表中的默认值将为＆＃34; N / A＆＃34;。

我通过以下方式实现了这一目标：

<select ng-model="Categories[productModel.Category]" ng-options="v.name for v in Categories" ...

但问题在于，当我更改选项时，该值不会绑定回模型。因为当用户更改值时数据会回发到服务器，所以我真的不想将productModel更改为具有与类别相同的Name和Number结构（如果这是最好的方法，我可以这样做）。我真的只是希望用户能够选择一个选项，并希望产品型号包含相应的数字。

我可以（我应该）使用＆＃39;轨道按照＆＃39;？

执行此操作

Answer 1

您需要更新ng-model值以绑定到productModel.Category，还需要将ng-options表达式更新为以下ng-options="v.Name as v.Number for v in categories"。

您可以找到有关ng-options和ng-model指令here的更多信息。

请参阅工作示例here

HTML：

<div ng-controller="TestController">
  <select ng-model="productModel.Category" ng-options="v.Name as v.Number for v in categories"></select>
  <h3>productModel.Catecogy => {{productModel.Category}}</h3>
</div>

JS：

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

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.productModel = {
    Id: 1,
    Description: 'Widget',
    Category: 0
  };

  $scope.categories = [{
    "Number": 0,
    Name: "N/A"
  }, {
    "Number": 1,
    Name: "Option 1"
  }, {
    "Number": 2,
    Name: "Option 2"
  }];
}]);

与问题无关，但尝试保持属性和变量名称相同的做法是不错的。

ng-option select绑定到单独的数组

1 个答案: