Question

我有使用angular的html页面。

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

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

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

在表格中有一个ChargeOptions元素，我想要显示select的费用选项详情。

html代码：

oblig

<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"的值。

我试过了：

1）使用ch.Id，但是选择没有正确显示数据。

2）ng-value，但仍无法正确显示数据。

我该如何解决这个问题？

Answer 1

更改

value="ch.Id"

到

value="{{ch.Id}}"

或

ng-value="ch.Id"

属性＆＃34;值＆＃34;不是一个有角度的指令（比如ng-model和ng-value），所以它不知道你想要什么＆＃34; ch.Id＆＃34;作为变量。

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返回值的名称来代替实际值

2 个答案: