ng-model returns 值的名称代替实际值

Question

我有 html 页面使用 angular。

我有一个 table 数组上有 ng-repeat:

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

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

在 table 中有一个 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，但select 没有正确显示数据。

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

我该如何解决这个问题？

Answer 1

改变

value="ch.Id"

到

value="{{ch.Id}}"

或

ng-value="ch.Id"

属性 "value" 不是 angular 指令（就像 ng-model 和 ng-value 一样）所以它不知道您打算 "ch.Id" 作为变量。

jsbin

Answer 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>

ng-model returns 值的名称代替实际值

ng-model returns name of value in place of real value

javascript

angularjs

angularjs-ng-model