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数据作为参数传递。是否可以在car之后替换ng-repeat数据？因此，当我单击anchor元素时，新数据将作为参数传递？

我该怎么做？

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; }

角度替换ng-repeat项目中的数据

1 个答案: