【问题标题】:How to use ng-options to set default value of select element reading from object?如何使用 ng-options 设置从对象读取的选择元素的默认值?
【发布时间】:2016-04-25 10:01:24
【问题描述】:

我有以下数据:

$scope.users = [
  {
    'id': 0,
    'name': 'Tom'
  },
  {
    'id': 1,
    'name': 'Jack'
  }
];

我有一个动态生成的默认对象。

$scope.default = {
  'id': 1,
  'name': 'Jack'
}

我正在尝试根据$scope.default 在我的 ng-options 中设置一个默认选定选项,但因为它是一个对象而不是字符串,所以它似乎不起作用。

<select ng-options="user.name for user in users" ng-model="default.name"></select>

我知道另一个问题,但它不适用于对象。

how to use ng-option to set default value of select element

【问题讨论】:

  • 在其中一个答案中使用 ng-options 语法,然后在控制器中对默认值和用户进行比较,并设置与默认值匹配的正确用户索引。我认为您的问题是您试图使用模型的默认对象而不是使用它来识别正确的模型。

标签: javascript angularjs angular-ngmodel ng-options angularjs-ng-model


【解决方案1】:

您可以使用“as”和“track by”来定义要比较的标签和字段:

<select ng-options="user as user.name for user in users track by user.id" ng-model="default"></select>

jsbin

【讨论】:

  • 如果你直接在 default.name 上使用 ng-model,你的“id”在选择之后不会改变,并且可能会混淆结果(一个对象的 id 来自一个值,并且名称从其他值)
  • 我使用您的代码创建了一个精简的 plnkr,这是一个比以前简单得多的示例。你愿意再看一遍吗?这是新链接:stackoverflow.com/questions/35142172/…
【解决方案2】:

查看https://docs.angularjs.org/api/ng/directive/ngInit

或尝试:

如果它是动态排序,那么您可以通过自定义字段 user.orderNum 或您可以更改的内容进行跟踪。我没有测试过,但应该能让你朝着正确的方向前进。

【讨论】:

  • 我试过 ng-init 但我似乎也无法让它工作。你能分享一个例子吗?
【解决方案3】:

默认情况下,ngModel 通过引用而不是值来监视模型。试试看

&lt;select ng-options="user.name for user in users track by user.name " ng-model="default.name"&gt;&lt;/select&gt;

更多here

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-07-04
    • 2015-01-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-01
    • 1970-01-01
    相关资源
    最近更新 更多