一尘不染

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

angularjs

我正在尝试编写一个函数,该函数使我可以在单击按钮时删除项目,但我认为我对该函数感到困惑-我可以使用$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();
};

阅读 244

收藏
2020-07-04

共1个答案

一尘不染

要删除项目,您需要将其从数组中删除,并且可以将bday项目传递给标记中的remove函数。然后在控制器中查找项目的索引并从数组中删除

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

然后在控制器中:

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item);
  $scope.bdays.splice(index, 1);     
}

Angular将自动检测到对bdays数组的更改并更新ng-repeat

演示:http :
//plnkr.co/edit/ZdShIA?p=preview

编辑:如果使用服务器进行实时更新将使用您创建的服务 $resource来管理阵列更新,同时更新服务器

2020-07-04