我如何删除一个项目或对象从数组使用ng-click?

我试图写一个函数，使我能够删除一个项目时，按钮被点击，但我认为我与函数混淆-我使用$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();
};

当前回答

如果你的项目中有ID或任何特定的字段，你可以使用filter()。它的行为类似于Where()。

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

控制器:

$scope.remove = function(item) { 
  $scope.bdays = $scope.bdays.filter(function (element) {
                    return element.ID!=item.ID
                });
}

2018-07-28 06:22:45

其他回答

以下是正确答案:

<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove=function($index){ 
  $scope.bdays.splice($index,1);     
}

在@charlietfl的回答中。我认为这是错误的，因为你传递$index作为参数，但你在控制器中使用愿望。如果我说错了请指正:)

2013-08-29 08:17:30

这是另一个答案。我希望它能有所帮助。

<a class="btn" ng-click="delete(item)">Delete</a>

$scope.delete(item){
 var index = this.list.indexOf(item);
                this.list.splice(index, 1);   
}

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

完整的源代码在这里 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

2017-03-27 09:08:04

以防你在ng-repeat里

你可以选择一条线

    <div ng-repeat="key in keywords"> 
        <button ng-click="keywords.splice($index, 1)">

            {{key.name}}
        </button>
    </div>

$index被angular用来显示ng-repeat中数组的当前索引

2015-09-22 15:08:39

如果你的项目中有ID或任何特定的字段，你可以使用filter()。它的行为类似于Where()。

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

控制器:

$scope.remove = function(item) { 
  $scope.bdays = $scope.bdays.filter(function (element) {
                    return element.ID!=item.ID
                });
}

2018-07-28 06:22:45

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

例如，在你的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中没有控制器。：）

发展快乐! !

2016-02-19 20:11:50

我如何删除一个项目或对象从数组使用ng-click?

推荐文章

最新文章

标签