ng-model 返回值的名称而不是实际值答案

【问题标题】：ng-model returns name of value in place of real valueng-model 返回值的名称而不是实际值
【发布时间】：2016-12-05 08:24:12
【问题描述】：

我有使用 Angular 的 html 页面。

我在数组上有一个带有 ng-repeat 的表：

<tr ng-repeat="oblig in Obligations">

oblig 对象包含连接到另一个数组ChargeOptions 的chargeOptionId 的属性。

表格内有一个select 元素，我想显示oblig 的收费选项的详细信息。

html代码：

<select class="form-control full-width" ng-model="oblig.ChargeOptionId">
        <option ng-selected="ch.Id == oblig.ChargeOptionId" value="ch.Id" ng-repeat="ch in ChargeOptions">{{ch.Account}}</option>
</select>

select 元素根据需要显示收费选项详细信息，但是当我尝试保存 oblig、oblig.ChargeOptionId="ch.Id" 字符串代替 ch.Id 的值时。

我试过了：

1) 使用ng-value，但选择未正确显示数据。

2) ng-options，但数据仍然没有正确显示。

我该如何解决这个问题？

【问题讨论】：

你能发布你的oblig JSON 吗？
提供完整代码。这个不清楚。
你应该看看 NgOption 属性docs.angularjs.org/api/ng/directive/ngOptions

标签： javascript angularjs angularjs-ng-model

【解决方案1】：

改变

value="ch.Id"

到

value="{{ch.Id}}"

或

ng-value="ch.Id"

属性“value”不是角度指令（如 ng-model 和 ng-value），因此它不知道您打算将“ch.Id”作为变量。

jsbin

【讨论】：

当我将其更改为 value="{{ch.Id}}" 或 ng-value="ch.Id" 时，ng-selected 不起作用，并且没有选择任何收费选项。跨度>
所以问题是下拉菜单没有获得初始值？我会将我的 jsbin 添加到我的答案中，您可以查看它是否按您想要的方式工作，或者我是否误解了这个问题。
我发现了问题：当 ChargeOptionId 的类型为 int 时，不知何故 typeof ch.Id 是字符串。我将它们更改为相同的类型，问题已解决。

【解决方案2】：

我不确定之前发生了什么失败，但这似乎可行：我使用 ng-options 而不是 ng-repeat。

这似乎可以解决问题：

angular.module('app', []).controller('Ctrl', function($scope) {
  $scope.Obligations = [
    { ChargeOptionId: 1 },
    { ChargeOptionId: 2 },
    { ChargeOptionId: 3 },
    { ChargeOptionId: 4 },
    { ChargeOptionId: 5 },
    { ChargeOptionId: 6 },
    { ChargeOptionId: 7 }
  ];
    
  $scope.ChargeOptions = [
    { Id: 1, Account: 'Account 1' },
    { Id: 2, Account: 'Account 2' },
    { Id: 3, Account: 'Account 3' },
    { Id: 4, Account: 'Account 4' },
    { Id: 5, Account: 'Account 5' },
    { Id: 6, Account: 'Account 6' },
    { Id: 7, Account: 'Account 7' }
  ];
  
  $scope.alertSelected = function(idx) {
    alert($scope.Obligations[idx].ChargeOptionId);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">
  <div ng-repeat="oblig in Obligations">
    <div>
      ChargeOption.Id = {{ChargeOptions[$index].Id}} / 
      Obligation.ChargeOptionId = {{oblig.ChargeOptionId}}
    </div>
    <select class="form-control full-width"
            ng-model="oblig.ChargeOptionId"
            ng-options="ch.Id as ch.Account for ch in ChargeOptions">
    </select>
    <button ng-click="alertSelected($index)">Selected value?</button>
    <br /><br />
  </div>
</div>

【讨论】：