Question

我有这个对象数组：

var abc = [
   {"id":28,"name":"Actions, State & Occurences"},     
   {"id":29,"name":"Descriptive Words & Modifiers"}  
   {"id":30,"name":"Counting & Measurement"},
   {"id":31,"name":"Time & Dates"}]

这是我正在使用的选择：

   {{ row.categoryId }}
   <select class="select"
           convert-to-number
           ng-options="option.name for option in abc track by option.id"
           ng-model="row.categoryId"></select>

我遇到的问题是row.categoryId是一个数字，并且没有选择正确的值。当我在这里选择一个值时，我的row.categoryId被设置为：

  {"id":28,"name":"Actions, State & Occurences"}

有人能告诉我有没有办法让这个工作正常，以便它设置并使用id值代替对象？

Answer 1

@Alan，您可以使用ng-options指令中的as子句来告诉AngularJS您希望将哪些内容设置到ng-model指令中使用的变量中。

检查以下示例（所选选项可能不会出现问题，因为它的工作版本here），option数组中的ctrl.abc对象{{1将属性设置（选中）到id中，并向用户显示ctrl.row.categoryId属性。

您可以找到有关ng-options here

的更多信息

name

angular
   .module('demo', [])
   .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.abc = [
    { "id":28,"name":"Actions, State & Occurences" },
    { "id":29,"name":"Descriptive Words & Modifiers" },
    { "id":30,"name":"Counting & Measurement" },
    { "id":31,"name":"Time & Dates" }];
  }

如果您要使用与用户选择选项时从<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demo"> <div ng-controller="DefaultController as ctrl"> {{ ctrl.row.categoryId }} <select class="select" convert-to-number ng-options="option.id as option.name for option in ctrl.abc track by option.id" ng-model="ctrl.row.categoryId"> </select> </div> </div>指令获得的完全相同的属性值在select元素中设置所选选项，则不需要使用track by。 p>

检查以下示例，该示例使用项目的ID设置所选选项。如果您希望使用与id属性不同的属性设置所选选项，则可以使用ng-options指令中的track by子句。

ng-options

 angular
   .module('demo', [])
   .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  vm.abc = [
    {"id":28,"name":"Actions, State & Occurences"},
    {"id":29,"name":"Descriptive Words & Modifiers"},
    {"id":30,"name":"Counting & Measurement"},
    {"id":31,"name":"Time & Dates"}];
  
  setItem();
  
  function setItem() {
    vm.row = {
      categoryId: 30
    }
  }
}

Answer 2

ng-options="option.id as option.name for option  in abc track by option.id"

工作Plunker

Answer 3

使用$ scope.abc而不是var abc。并使用此

替换您的选择标记

string

如果您需要在select标签内预先选择第一个值，请将ng-model分配给数组的第一个值，如下所示 $ scope.row.categoryId = $ scope.abc [0]; 这应该可以解决你的问题

我的ng-select导致我的对象数组无法正常工作？

3 个答案: