Angular替换NG重复项目中的数据

Question

考虑此代码：

<div ng-repeat="car in cars() | filter: car.owned == true">
    <a href="" ng-click="selectCar(car)">{{ car.name }}</a>
    ...
</div>

在ng-click指令上，我正在调用一个函数selectCar()，将car数据作为参数传递。ng-repeat之后是否可以更换car数据？因此，当我单击锚点元素时，新数据将作为参数传递？

我该怎么做？

Answer 1

这里的问题是ng-repeat为每个列表项目创建一个新的范围。因此，所有这些范围都有不同的car属性。不过，您的selectCar()方法是在父范围上定义的，因此，如果您要执行以下操作：

$scope.selectCar = function(car) {
  $scope.car = newCar;
}

由于您将car属性设置在父范围内，因此不会产生任何效果。一种选项是修改您发送到selectCar()的对象。类似：

$scope.selectCar = function(car) {
  var newCar = ...;
  for (var key in newCar) {
    car[key] = newCar[key];
  }
}

这不是解决它的好方法。另一个选择是创建一个将ng-repeat范围传递到事件处理程序的新指令。这样的东西：

myModule.directive('repeatClick', ['$parse', function($parse) {
  return {
    restrict: 'A',
    compile: function($element, attr) {
      var fn = $parse(attr['repeatClick']);
      return function(scope, element, attr) {
        element.on('click', function(event) {
          scope.$apply(function() {
            fn(scope, {$event: event, $scope: scope});
          });
        });
      };
    }
  };
}]);

允许您这样写的html：

<a href="" repeat-click="selectCar(car, $scope)">{{ car.name }}</a>

和您的点击处理程序：

$scope.selectCar = function(car, $repeatScope) {
  var newCar = ...;
  $repeatScope.car = newCar;
}

这是一个示例：http：//jsbin.com/dupiraju/2/edit

编辑

我的错误，有一种更简单的方法可以做到这一点。您的selectCar()方法将在ng-repeat范围上调用，并且您可以在功能中使用this访问它。因此，您可以删除repeat-click指令，只需更改selectCar()方法：

$scope.selectCar = function(car) {
  var newCar = ...;
  this.car = newCar;
}