AngularJS中如何实现特定格式对象与其他数组值的绑定？

首先看你提供的原始HTML代码：

<td style="max-width:29px" ng-repeat="measure in item.measures" ng-click="changeValues(measure)" ng-model="formData.dataChanged">
  {{measure.column[measure.column.length-1].value}}
  <span ng-show="measure.column.length>1">*</span>
</td>

你想要将{{measure.column[measure.column.length-1].value}}与其他数组值实现有效绑定，但尝试的代码没有解决问题：

$scope.measure = ($scope.measure) ? $scope.measure : {}; 
$scope.measure.column = ($scope.measure.column) ? $scope.measure.column : {}; 
$scope.measure.column[$scope.measure.column.length-1].value = $scope.popupData[0].valueItem;

问题分析与解决方案 #

你的代码里有几个关键问题，我来一步步帮你修正：

1. 初始化错误：column应该是数组而非对象
   你把$scope.measure.column初始化为{}（对象），但从HTML里的measure.column.length能看出来，column是一个数组。对象没有length属性，这会导致后续赋值时出现undefined报错。正确的初始化应该是：

   $scope.measure = $scope.measure || {};
   $scope.measure.column = $scope.measure.column || []; // 这里改成数组
   

2. 空数组时赋值会报错
   如果measure.column是空数组，$scope.measure.column.length-1会等于-1，访问column[-1]会得到undefined，再赋值.value就会抛出错误。所以要先确保数组里至少有一个对象：

   // 检查数组是否为空，为空则添加一个默认对象
   if ($scope.measure.column.length === 0) {
     $scope.measure.column.push({ value: '' });
   }
   // 再给最后一项赋值
   $scope.measure.column[$scope.measure.column.length - 1].value = $scope.popupData[0].valueItem;
   

3. 确保引用正确，让视图自动更新
   在changeValues函数里，你需要直接引用item.measures中的当前measure对象，而不是创建新对象。这样当你修改$scope.measure的属性时，会直接修改原数组里的对象，Angular的脏检查机制会自动更新视图：

   $scope.changeValues = function(measure) {
     $scope.measure = measure; // 直接赋值引用，而非复制
   };
   

4. 注意ng-model的使用场景
   你在<td>上用了ng-model，但ng-model只能用于表单控件（比如<input>、<select>等），放在<td>上是无效的，建议移除这个属性，避免混淆。

修改后，当你点击<td>触发changeValues，然后给最后一项的value赋值时，视图里的{{measure.column[measure.column.length-1].value}}会自动同步更新，实现你需要的绑定效果。

内容的提问来源于stack exchange，提问作者Bibi