我试图写一个函数,使我能够删除一个项目时,按钮被点击,但我认为我与函数混淆-我使用$digest吗?

HTML & app.js:

<ul ng-repeat="bday in bdays">
  <li>
    <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
    <form ng-show="editing" ng-submit="editing = false">
      <label>Name:</label>
      <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
      <label>Date:</label>
      <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
      <br/>
      <button class="btn" type="submit">Save</button>
      <a class="btn" ng-click="remove()">Delete</a>
    </form>
  </li>
</ul>

$scope.remove = function(){
  $scope.newBirthday = $scope.$digest();
};

当前回答

使用$index在基本情况下工作得非常好,@charlietfl的答案很棒。但有时,$index是不够的。

Imagine you have a single array, which you're presenting in two different ng-repeat's. One of those ng-repeat's is filtered for objects that have a truthy property, and the other is filtered for a falsy property. Two different filtered arrays are being presented, which derive from a single original array. (Or, if it helps to visualize: perhaps you have a single array of people, and you want one ng-repeat for the women in that array, and another for the men in that same array.) Your goal: delete reliably from the original array, using information from the members of the filtered arrays.

在每个过滤后的数组中,$index不会是原始数组中该项的索引。它将是筛选子数组的下标。你无法在原始的people数组中知道person的索引,你只能从women或men子数组中知道$index。尝试使用它删除,你会有项目从任何地方消失,除了你想要的地方。怎么办呢?

如果您足够幸运,使用的数据模型包含每个对象的唯一标识符,那么使用该标识符而不是$index来查找对象并将其从主数组中拼接出来。(请使用下面的例子,但是使用唯一标识符。)但如果你没那么幸运呢?

Angular实际上用一个名为$$hashKey的唯一属性来扩充ng-repeat数组(主数组中的原始数组)中的每一项。您可以在原始数组中搜索与要删除的项的$$hashKey相匹配的项,并以这种方式删除它。

注意$$hashKey是一个实现细节,不包含在ng-repeat的已发布API中。他们可以在任何时候删除对该属性的支持。但可能不会。: -)

$scope.deleteFilteredItem = function(hashKey, sourceArray){
  angular.forEach(sourceArray, function(obj, index){
    // sourceArray is a reference to the original array passed to ng-repeat, 
    // rather than the filtered version. 
    // 1. compare the target object's hashKey to the current member of the iterable:
    if (obj.$$hashKey === hashKey) {
      // remove the matching item from the array
      sourceArray.splice(index, 1);
      // and exit the loop right away
      return;
    };
  });
}

调用:

ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"

EDIT:使用这样的函数(键在$$hashKey上,而不是特定于模型的属性名上)还有一个显著的附加优势,即使该函数可以跨不同的模型和上下文重用。向它提供数组引用和项引用,它就可以工作了。

其他回答

我通常这样写:

<a class="btn" ng-click="remove($index)">Delete</a>


$scope.remove = function(index){
  $scope.[yourArray].splice(index, 1)
};

希望这能有所帮助 你必须在$scope和[yourArray]之间使用一个点(.)

我不同意你应该在控制器上调用一个方法。你应该为任何实际的功能使用服务,你应该为任何可伸缩性和模块化的功能定义指令,以及分配一个单击事件,其中包含你注入到指令中的服务调用。

例如,在你的HTML中…

<a class="btn" ng-remove-birthday="$index">Delete</a>

然后,创建一个指令…

angular.module('myApp').directive('ngRemoveBirthday', ['myService', function(myService){
    return function(scope, element, attrs){
        angular.element(element.bind('click', function(){
            myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope);  
        };       
    };
}])

那么为你服务…

angular.module('myApp').factory('myService', [function(){
    return {
        removeBirthday: function(birthdayIndex, scope){
            scope.bdays.splice(birthdayIndex);
            scope.$apply();
        }
    };
}]);

当您像这样正确地编写代码时,您将非常容易编写将来的更改,而不必重新构造代码。它被正确地组织起来,并且通过使用自定义指令绑定来正确地处理自定义单击事件。

例如,如果你的客户说,“嘿,现在让它调用服务器并制作面包,然后弹出一个模态。”您将能够轻松地访问服务本身,而无需添加或更改任何HTML和/或控制器方法代码。如果控制器上只有一条线,那么最终需要使用服务,将功能扩展到客户端要求的更重的起重设备。

此外,如果你在其他地方需要另一个“删除”按钮,你现在有一个指令属性('ng-remove-birthday'),你可以很容易地将其分配给页面上的任何元素。这使得它现在是模块化和可重用的。这将在处理Angular 2.0的HEAVY web组件范例时派上用场。2.0中没有控制器。:)

发展快乐! !

Pass the id that you want to remove from the array to the given function 

函数可以在同一个控制器中,但更可取 保持服务)

    function removeInfo(id) {
    let item = bdays.filter(function(item) {
      return bdays.id=== id;
    })[0];
    let index = bdays.indexOf(item);
    data.device.splice(indexOfTabDetails, 1);
  }

使用$index在基本情况下工作得非常好,@charlietfl的答案很棒。但有时,$index是不够的。

Imagine you have a single array, which you're presenting in two different ng-repeat's. One of those ng-repeat's is filtered for objects that have a truthy property, and the other is filtered for a falsy property. Two different filtered arrays are being presented, which derive from a single original array. (Or, if it helps to visualize: perhaps you have a single array of people, and you want one ng-repeat for the women in that array, and another for the men in that same array.) Your goal: delete reliably from the original array, using information from the members of the filtered arrays.

在每个过滤后的数组中,$index不会是原始数组中该项的索引。它将是筛选子数组的下标。你无法在原始的people数组中知道person的索引,你只能从women或men子数组中知道$index。尝试使用它删除,你会有项目从任何地方消失,除了你想要的地方。怎么办呢?

如果您足够幸运,使用的数据模型包含每个对象的唯一标识符,那么使用该标识符而不是$index来查找对象并将其从主数组中拼接出来。(请使用下面的例子,但是使用唯一标识符。)但如果你没那么幸运呢?

Angular实际上用一个名为$$hashKey的唯一属性来扩充ng-repeat数组(主数组中的原始数组)中的每一项。您可以在原始数组中搜索与要删除的项的$$hashKey相匹配的项,并以这种方式删除它。

注意$$hashKey是一个实现细节,不包含在ng-repeat的已发布API中。他们可以在任何时候删除对该属性的支持。但可能不会。: -)

$scope.deleteFilteredItem = function(hashKey, sourceArray){
  angular.forEach(sourceArray, function(obj, index){
    // sourceArray is a reference to the original array passed to ng-repeat, 
    // rather than the filtered version. 
    // 1. compare the target object's hashKey to the current member of the iterable:
    if (obj.$$hashKey === hashKey) {
      // remove the matching item from the array
      sourceArray.splice(index, 1);
      // and exit the loop right away
      return;
    };
  });
}

调用:

ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"

EDIT:使用这样的函数(键在$$hashKey上,而不是特定于模型的属性名上)还有一个显著的附加优势,即使该函数可以跨不同的模型和上下文重用。向它提供数组引用和项引用,它就可以工作了。

建立在接受的答案,这将与ngRepeat,过滤器和处理期望更好:

控制器:

vm.remove = function(item, array) {
  var index = array.indexOf(item);
  if(index>=0)
    array.splice(index, 1);
}

观点:

ng-click="vm.remove(item,$scope.bdays)"