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

HTML

理查德前端

2020-04-03

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

第3888篇《如何使用ng-click从数组中删除项目或对象?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
猴子村村 2020.04.03

这是另一个答案。希望对您有所帮助。

<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/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

梅宝儿 2020.04.03
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);
  }
村村 2020.04.03

如果项目中有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
                });
}
2020.04.03

我通常是这样写的:

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


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

希望这对您有所帮助。您必须在$ scope和[yourArray]之间使用点(。)。

老丝Tom前端 2020.04.03

这是正确的答案:

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

在@charlietfl的答案中。我认为这是错误的,因为您通过$index了参数传递,但在控制器中使用了愿望。如我错了请纠正我 :)

古一 2020.04.03

在已接受的答案的基础上,它将与一起使用ngRepeatfilter并更好地处理期望:

控制器:

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

视图:

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

如果您在ng-repeat中

您可以使用一个班轮选项

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

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

$index 由angular用来显示内部数组的当前索引 ng-repeat

番长樱梅 2020.04.03

要删除项目,您需要将其从数组中删除,并且可以将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来管理阵列更新,同时更新服务器

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android