角度替换来自 ng-repeat 项目的数据 [英] Angular replace data from ng-repeat item

问题描述

考虑这个代码:

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

在ng-click 指令上，我调用了一个函数selectCar()，将car 数据作为参数传递.在ng-repeat之后是否可以替换car数据?这样当我点击锚元素时，新数据将作为参数传递?

我该怎么做?

解决方案

这里的问题是 ng-repeat 为每个列表项创建一个新的作用域.所以在所有这些范围中有一个不同的 car 属性.您的 selectCar() 方法是在父作用域上定义的，所以如果您执行以下操作:

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

它不会有任何影响，因为您在父作用域上设置了 car 属性.一种选择是修改您发送到 selectCar() 的对象.类似的东西:

$scope.selectCar = function(car) {var newCar = ...;for (var key in newCar) {汽车[钥匙] = 新汽车[钥匙];}}

但这不是一个很好的解决方法.另一种选择是创建一个新指令，将 ng-repeat 范围传递给事件处理程序.像这样:

myModule.directive('repeatClick', ['$parse', function($parse) {返回 {限制:'A'，编译:函数($元素，属性){var fn = $parse(attr['repeatClick']);返回函数(范围，元素，属性){element.on('click', function(event) {范围.$应用(函数(){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;}

Consider this code:

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

On the ng-click directive, I'm invoking a function selectCar(), passing the car data as a parameter. Will it be possible to replace the car data after the ng-repeat? So that when I click the anchor element, the new data will be passed as parameter?

How can I do this?

解决方案

The problem here is that ng-repeat creates a new scope for every list item. So there's a different car property in all those scopes. Your selectCar() method is defined on the parent scope though, so if you'd do something like:

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

It wouldn't have any effect since you're setting the car property on the parent scope. One option is to modify the object that you send to selectCar(). Something like:

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

But that's not a very nice way to solve it. Another option is to create a new directive that passes the ng-repeat scope into the event handler. Something like this:

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

That allows you to write your HTML like this:

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

And your click handler:

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

Here's an example: http://jsbin.com/dupiraju/2/edit

EDIT

My mistake, there's a much simpler way to do this. Your selectCar() method is going to be invoked on the ng-repeat scope, and you have access to it with this inside the function. So you can remove the repeat-click directive, and just change your selectCar() method to this:

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

这篇关于角度替换来自 ng-repeat 项目的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！