如何使用angularjs从数组中删除元素？
使用AngularJS从数组中删除元素可以通过以下步骤实现：
- 在HTML文件中引入AngularJS库：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>- 在JavaScript文件中创建一个AngularJS应用：
var app = angular.module('myApp', []);- 在HTML文件中定义一个控制器，并将其与应用关联起来：
<div ng-app="myApp" ng-controller="myCtrl">- 在JavaScript文件中定义控制器，并在其中创建一个数组：
app.controller('myCtrl', function($scope) {
$scope.myArray = [1, 2, 3, 4, 5];
});- 在HTML文件中使用ng-repeat指令来遍历数组，并显示每个元素：
<div ng-repeat="item in myArray">
{{ item }}
</div>- 在JavaScript文件中定义一个函数，用于从数组中删除指定的元素：
$scope.removeItem = function(item) {
var index = $scope.myArray.indexOf(item);
if (index > -1) {
$scope.myArray.splice(index, 1);
}
};- 在HTML文件中使用ng-click指令来调用删除函数，并传递要删除的元素作为参数：
<button ng-click="removeItem(item)">删除</button>完整的示例代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in myArray">
{{ item }}
<button ng-click="removeItem(item)">删除</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myArray = [1, 2, 3, 4, 5];
$scope.removeItem = function(item) {
var index = $scope.myArray.indexOf(item);
if (index > -1) {
$scope.myArray.splice(index, 1);
}
};
});
</script>
</body>
</html>这样，当点击"删除"按钮时，对应的元素将从数组中删除。
相关·内容
1回答
我使用指令来分离实体(例如，个人)的逻辑。
因此，我有一项人民服务，它存储了许多人，例如：
this.people = ["Person 1", "Person 2", "etc"];
然后控制器注入该服务，并将数据发送到包含我的指令的模板中。所以我的模板看起来像：
<div ng-repeat="person in people">
<person name="person"></person>
</div>
现在，在我的指令中，我有一个delete函数(通
浏览 1提问于2014-02-10得票数 2
回答已采纳
我正在创建一个角度应用程序，它有一个带有ng-重复的li和一个用于搜索输出输入ng-重复的文本框，重复的项目有一个删除"X“按钮，它从DB中删除记录。我面临的问题是如何使用剪接从数组中删除搜索记录。
转到上面的plnkr点击任何"x“没有搜索，然后它将从列表中被删除。但是当你搜索某些东西时，让我们说红宝石，那么只有红宝石会出现在列表中，但是点击"x“，它仍然会出现。在使用数组操作从数组中删除搜索字段时，我需要帮助，我不想再次重新生成该数组。
浏览 3提问于2014-05-15得票数 0
回答已采纳
我在这个中有一个angular应用程序。
在这里，我试图使用单个列表来实现拖放功能。
下面是应用程序：
app.controller('MainCtrl', function($scope) {
$scope.people = [
{'id':'1' ,'name':'John','category':'m'},
{'id':'2', 'name':'Jack','category&#
浏览 0提问于2014-05-21得票数 0
1回答
我有这个自定义的AngularJS过滤器，包含一些条件。在我的else条件下，我从数组中剪接值并返回该数组。
下面是我的问题:在else条件中，将数组中的值从数组中剪接出来，然后调用if条件，它将不再处理原始完整的原始数组，而只是在拼接后只处理包含剩余索引的部分数组。
如何纠正这种情况，以确保每次运行筛选器时，我都在处理完整的数据集？我尝试在var newArr = items.splice(0)块中处理数组的一个副本(使用else )，但无论出于什么原因，问题仍然存在。
一种选择是在else条件下构建一个新数组并返回该数组，而不是删除原始数组。但是，由于我处理的是一个复杂的多嵌套数据结构，为
浏览 0提问于2017-08-20得票数 0
我想使用angularjs从表中删除该行。但是它不能正常工作，它删除了前一行。不是正确的一排。如何纠正这个问题。
请看工作的
代码剪短
<body ng-app="myApp" ng-controller="tasksCtrl">
<div>
<table class="table table-striped">
<tbody>
<tr ng-repeat="task in tasks">
浏览 2提问于2015-07-07得票数 1
回答已采纳
我需要在运行时从AngularJS控制器中设置HTML元素的宽度。我的控制器在我的指令中定义。我知道我需要在指令中设置第一个ul元素的宽度。目前，我有以下几点：
var list = $element.find('ul');
$element(list[0]).css('width', '300px'));
但是，当我尝试这样做时，我会得到一个错误，即：
TypeError: object is not a function
我做错了什么？如何在运行时在AngularJS中设置HTML元素的宽度？
谢谢!
浏览 4提问于2014-10-08得票数 1
回答已采纳
1回答
我有一个视图模板，它的model是服务的属性，设置在指令的控制器中。当服务的属性被更新时，它不会在视图中被更新。
<ul>
<li ng-repeat="i in x">
<item model=i></item>
</li>
app.directive('x', function($http, MyService){
return {
restrict: 'E',
replace: true,
templateUrl
浏览 5提问于2013-09-16得票数 0
回答已采纳
2回答
我正在尝试使用指令创建递归网格布局。
有一个父容器(Appliedgrids)，它包含内部的网格数组。
网格中包含列的数组。
每个列都有两个属性:span(列的宽度)和数据(列内的数据)。
每个列数据都再次包含网格或小部件。如果它包含网格，则对grid指令进行递归调用。
我的问题是，当我使用删除按钮删除网格时，它会从appliedgrid容器中删除，但是双向数据绑定不能正常工作。代替当前网格，最后一个网格将从UI中删除。
Link-
复制步骤: 1)单击第一个网格上的remove按钮，您将看到第一个网格被移除，第二个网格被删除。而应用网格的json数据中包含第二个网格
浏览 2提问于2014-06-19得票数 2
回答已采纳
为了简化我的问题，假设对象是jqlite对象，使用angular.equals函数，我可以检查它们是否相等。我的问题是:如何使用此函数从jqLite对象数组中删除重复项？
这是我尝试过的：
// Suppose jqArr is the array stated above:
var result = [];
angular.forEach(jqArr, function(v_i){
if(result.length === 0){
result.push(v_i);
} else {
var isPushed = false;
angular
浏览 0提问于2017-03-24得票数 1
我正在创建一个新的指令，我想知道当angular从DOM中删除元素时如何得到通知。
我的目标是在删除元素时添加一个jquery动画。
浏览 0提问于2012-07-19得票数 15
回答已采纳
我一直在开发一个小型应用程序，它使用Laravel 4作为后端，以AngularJS为起点(主要是学习angularjs)。
我的想法是，我可以通过表单添加书签，并在可搜索的表中显示这些书签。我让它在我可以张贴到数据库和保存记录的地方工作。下面这份工作完全符合我的需要。
$scope.addLink = function () {
var link = {
title: $scope.newTitle,
address: $scope.newAddress,
type: $scope.newType
};
$
浏览 3提问于2014-09-14得票数 0
回答已采纳
我正在尝试删除一个角元素，但是在从列表中删除一个元素之后，我得到了一个Error: [ngRepeat:dupes]。
我的控制器：
app.controller("ListController",[function () {
this.tasks = [
{ id: 1, taskName : "Cras justo odio 1", badge : 10 },
{ id: 2, taskName : "Cras justo odio 2", badge : 12 },
{ id: 3, taskNa
浏览 5提问于2015-02-11得票数 0
回答已采纳
1回答
我有一个数组，其中包含从Java检索的几个{id:x , name:y}对象，我需要按字母顺序排列它们，但是其中一个对象必须强制位于<select> comboBox的底部，我如何才能实现这个结果？我在orderBy中使用了ng选项，但是，我不知道如何将这个特定的对象放在底部。
浏览 3提问于2015-08-31得票数 0
回答已采纳
在angularjs中处理pager指令。当我硬编码样本收集($scope.installations)时，一切正常，但当我从服务器的“options”属性中提取数据时，指令中的属性总是“未定义”。
以下是我的指令：
angular.module("qusion.ui.pager", [])
.directive("qnPager", [
function() {
return {
restrict: 'A',
link: functi
浏览 0提问于2012-11-18得票数 0
2回答
所以我在这里有点进退两难。我有一个嵌套的json对象，它在ng-repeat中，可以使用进行排序(基于JQuery UI可排序)：
$scope.rootItem = {
id: '1',
type: 'course',
title: 'Adobe Photoshop CC for beginners',
items: [{
id: '2',
type: 'label',
titl
浏览 11提问于2016-07-29得票数 2
回答已采纳
可能重复：
我有一张物品清单，比如汽车
$cars[0] = "audi";
$cars[1] = "saab";
$cars[2] = "volvo";
$cars[3] = "vw";
我该如何从名单中删除“沃尔沃”？
浏览 5提问于2011-02-01得票数 21
回答已采纳
我的控制器中有$scope.notys数组，ng-repeat中有
<li ng-repeat="x in notys" class="item js-item">
...
在我的控制器中，我将数据推入数组，如下所示：
$scope.notys.push(data);
每个data都有一个id属性data.id。
问题是如何更新/替换属性与来自ajax的上一个data.id相同的对象？
所以我需要做这样的事情：
从ajax获取data
现在有来自ajax的data.id，我需要检查$scope.notys中是否存在具有相同data.id的对象
浏览 1提问于2015-10-11得票数 0
下面给出了相应的html代码。
<div class="row" ng-repeat="myCart in cart">
<div class="col-lg-4 col-md-4">
<div class="row">
<div class="col-lg-4 col-md-4">
<a href="#"&g
浏览 5提问于2016-03-04得票数 1
回答已采纳
5回答
从数组中删除条目
、、
我想做某事。如下所示：
foo=(a b c)
foo-=b
echo $foo # should output "a c"
如何从数组中删除条目？foo-=b不起作用。
无论条目在哪里，删除都应该起作用。
浏览 0提问于2010-08-09得票数 28
回答已采纳
如何实现数组中所有元素的输出？任务:n个人被安排成一个圆圈。从第一开始倒计时，每个k被移除，每次移除后关闭圆圈。剩下的是谁？显示从圆圈中移除的顺序。
#include <iostream>
#include <conio.h>
int counter(int n, int k) {
int function = n >= 1 ? (counter (n - 1, k) + k - 1) % n + 1: 1;
return function;
};
int main(void) {
setlocale(LC_ALL, "Russi
浏览 2提问于2021-02-15得票数 0
回答已采纳
1回答
我已经宣布了一个具体的拼贴画如下所示
private static String[] testCollection= new String[]
{"DB085175AF684343888344561C2723C1",
"DB085175AF684343888344561C2723C2"}
然后有一个方法从我的集合中返回一个随机元素。
public static <T> T getRandomElement(Collection<T> collection)
{
int size = collect
浏览 2提问于2020-07-16得票数 0
回答已采纳
你好，我有一个excel，它的用户数据采用以下格式：
User Info Order Info
User Name,User Phone Number Order No,Order Name
XYZ,123-123-1234 123,Test1
ABC,111-222-1111 800,Test2
如何在angularjs中跳过head
浏览 0提问于2018-04-23得票数 1
我试图从Json对象中删除一个对象-- works..but --它将其替换为null。我不知道为什么，我如何从Json函数中删除空值：
company.deleteExternalLinkFromGrid = function (row, matricule) {
// console.log('Inside of deleteModal, code = ' + code);
//$scope.sitting= {};
console.log(matricule);
//console.log(JSON.strin
浏览 1提问于2017-04-20得票数 3
回答已采纳
我在写
angularjs/nodejs
我使用$http service从数据库加载数据，并使用ngRepeat指令将其显示到视图中。我不能做的是，当我向数据库中添加新的项，用一个项目更新我的视图，然后用动画来做它。我知道需要使用ngAniamte并在ng enter上设置类，但是如何在不重新加载整个视图的情况下将单个项插入数据数组？？
数据加载和插入
vm.loadData = function () {
$http.get('/data')
.succe
浏览 3提问于2016-09-07得票数 0
我正在编写一个AngularJS应用程序，其中一个数组(活动工作订单列表)在许多不同的控制器中使用。使用对服务器的$http调用定期刷新此数组。为了共享这些信息，我将数组放置在一个服务中。
服务中的数组开始为空(或出于调试目的，使用虚拟值["A", "B", "C"])，然后查询服务器以初始化列表。不幸的是，我的所有控制器似乎都绑定到数组的预查询版本--在我的应用程序中，我看到的只是我用它初始化数组的虚拟值。
我的目标是以这样的方式将数组绑定到我的控制器中，这样就可以实现数组已被更新，并在数组更改时使我的视图重新呈现，而无需引入$watch或强
浏览 2提问于2013-01-15得票数 11
回答已采纳
问题是我想知道delete操作符是如何从数组中删除一个值的。它会对整个数组进行循环吗？在注意时间复杂度的情况下，从数组中删除和项的最好方法是什么？ 谢谢你的回答。
浏览 25提问于2021-01-15得票数 2
回答已采纳
很难让代码正常工作。检查一下。
指令wrapper将根据所提供的限制(min、max)创建一组task指令。信息(绑定)是使用数组wrapper中的arr元素从wrapper传递给wrapper指令的。另外，在删除按钮时，它的scope和关联的wrapper元素被删除，其关联的数组元素在wrapper中被删除。
尝试按顺序(4、3、2、1、0)删除按钮，但尝试删除按钮3，然后删除4按钮，但对于4，它在scope.twb.remove = true;函数的task指令中崩溃。
崩溃的原因可能是删除了按钮3，它在数组中的关联元素(在索引3。键0-4的索引0-4)被删除。而按钮4仍然指向位于第四个索
浏览 2提问于2015-11-12得票数 0
1回答
我试图使用项的索引从AngularJS的作用域数组变量中删除一个项。
(如果你要停止阅读这里认为这是一个复制，请跳到脚注链接，我能够找到类似的，但不一样的问题得到了答案-或者，我可能错过了一些东西，所以如果你找到完全相同的问题，我会感谢你，如果你愿意分享它的so链接！( Thx)
这是我的：
http://jsbin.com/seyaje/3/edit?html,output
我看到的问题是，索引没有自动更新--每次都是这样--因此删除了错误的项，或者如果索引“超出范围”，则根本不会删除该项。
我个人更喜欢的是在我的场景中传递索引，而且我认为不需要重复计算索引的工作相对较少。(如果索引正确!
浏览 2提问于2014-11-25得票数 2
回答已采纳
假设我不想使用向量和使用动态数组(只是学习的目的)。从我分配的这个动态数组中，我想删除特定的索引。
int * array = new int[10];
delete &array[3];
当我尝试这样做的时候，我得到了SIGSEGV，分割错误。
我如何删除特定的索引(比方说索引3，我知道它的连续内存，它会造成空洞，但只是为了学习目的)，就像我试图正确地做上面那样，如果这是我的记忆，为什么我会有分段错误呢？
浏览 4提问于2016-10-11得票数 0
回答已采纳
5回答
如何从以下数组哈希中删除元素；
%HoA = (
flintstones => [ {day=>'19'}, {day=>'21'}, {day=>'22'} ],
jetsons => [ {day=>'29'}, {day=>'23'}, {day=>'25'} ],
simpsons => [ {day=>'26'}, {day=>'33'}
浏览 0提问于2010-03-03得票数 5
我知道如何删除一个值并将其剪接到array.Currently，我的代码如下所示。
my $newDate ="$dayStr/$monthStr/$yearStr";
delete @CONTENTS[9];
splice(@CONTENTS,9,1,$newDate);
这可以将$newDate(DATE)中的删除和拼接到第10位。但是，我遇到的问题是，由于我的用户设置的文件格式，$newDATE(DATE)并不总是位于第10位。幸运的是，如果我们从后面数的话，$newDate(DATE)总是固定在第四位。
对于如何做到这一点，有什么改变的解决方案吗？如何从后面数数组，这样
浏览 6提问于2014-04-17得票数 0
回答已采纳
我有一个从对象数组中删除的函数，但是当我检查它是.length时，它是相同的。
这就是我所拥有的：
console.log(data.length);
delete(data[i]);
console.log(data.length);
console.log(data);
我的输出结果如下：
3
3
[object Array]
我已经注意到了下面的对象数组的图像，你只看到两个整体，但长度仍然是3。
初始数据im测试的结果如下：
[
{"equip":"0","name":"Test","id"
浏览 3提问于2013-12-27得票数 2
回答已采纳
1回答
如何替换mongodb数组元素中的所有元素。如下面的示例所示，我的要求是从技能数组中移除这两个对象并在其中添加新元素。
{
"_id": "uniqueid",
"skills": [
{ "skill": "dancer" },
{ "skill": "singer" }
]
}
我需要替换所有技能数组字段的元素。如何使用mongodb驱动程序或其他查询类型来实现这一点？
浏览 0提问于2018-10-25得票数 0
回答已采纳
我试图从数组中删除一个对象，但由于某些原因，它无法工作。我的印象是，拼接接受两个参数:第一，数组中开始的位置。对于参数2，从那时起删除多少。
我只想删除一个条目，所以我这样做：
array.splice(i,0);
但它不起作用。谁能告诉我我做错了什么，并告诉我它应该是如何工作的。
浏览 0提问于2010-01-12得票数 11
回答已采纳
假设我得到了用户输入。如果他们键入的内容不在数组中(如何检查数组？)，则将其添加到数组中。反之亦然，如何在给定用户输入的情况下从数组中删除内容。
示例：
string teams[] = {"St. Louis,","Dallas","Chicago,","Atlanta,"};
cout <<"What is the name of the city you want to add?" << endl;
cin >> add_city;
cout <<
浏览 0提问于2012-10-22得票数 3
回答已采纳
我知道这并不理想，但我在我的jQuery构建中使用了、和。
我的Draggable使用了克隆，所以一旦我把它放到Droppable元素中，我就需要复制它。
为此，我使用以下代码。
$formContainer.droppable({
'drop' : function (event, ui) {
var clone = ui.helper.clone();
clone.draggable({ /* ... */ });
clone.resizable({ /* ... */ });
浏览 4提问于2015-08-20得票数 0
回答已采纳
我有一个抽象状态，其控制器从$resource异步获取数据。并将结果输入$rootScope.data。
.state('stateA', {
abstract: true,
url...
templateUrl...
controller: function($rootScope, Resource){
// Empty data so far
$rootScope.data = [];
Resource.query().$promise.then(function(data){
浏览 5提问于2014-05-27得票数 0
回答已采纳
从理论上讲，从ArrayList或LinkedList中删除元素更有效吗
浏览 0提问于2009-06-23得票数 0
回答已采纳
我在postgres中有一个json对象字段，它的形状如下
{
"a": {
},
"b": [
{
}
],
"c": {
"d": "",
"e": [
{
"id": 1234,
"f": "",
"g": ""
}
]
}
}
我想知道如何编写一
浏览 2提问于2020-12-08得票数 1
我该如何从flex移动应用程序的actionBar "actionContent“中删除按钮呢？
我尝试了这些：
this.stage.removeChild(menu_btn);
this.removeChild(menu_btn);
stage.removeChild(menu_btn);
this.stage.removeElement(menu_btn);
this.removeElement(menu_btn);
stage.removeElement(menu_btn);
我可没那么走运。我猜测它在located内容中的位置并不被认为是阶段。有什么想法吗？
<s:ac
浏览 2提问于2011-09-28得票数 2
回答已采纳
我花了很多时间试图从Json文件中删除一个项目。
这是我的json文件
{
"count": 3,
"data": [
{
"id": "1",
"raison": "ABS",
"email": "abs@abs.com",
"tel": "021269999999"
},
{
"id": "3",
浏览 15提问于2016-09-01得票数 0
回答已采纳
我正在编写一个方法，该方法从字符串的ArrayList中删除一个元素(如果它具有给定的长度)，并将被删除的字符串放入包含String的数组中，而在从列表中删除元素之后，我对如何将元素插入数组感到有点困惑。
我的ArrayList叫做list，它是程序开始时的一个实例变量。
public String[] removeOfLength(String [] arr, int wordLength)
{
arr = new String[list.size()];
for(int i = 0; i < list.size(); i++)
{
if(lis
浏览 0提问于2015-01-21得票数 1
回答已采纳
1回答
在AngularJS中断开绑定的正确方法是什么？
我有一个非角度的应用程序，它正在加载一个使用angularjs进行数据绑定的组件。在某些时候，我想要销毁组件，并希望确保没有内存泄漏。如何告诉angular从DOM的该部分中删除所有事件侦听器？
$(node).remove()会完成这项工作吗，或者angular会在内存中做其他需要清理的事情……？在angular中避免mem泄漏的任何其他技巧都将不胜感激。
浏览 8提问于2012-12-13得票数 14
我有一个由名为items的对象填充的数组状态：
const [items, setItems] = useState([{name: "", toppings: []}])
但是，当我尝试删除具有此功能的指定索引时：
const removeItem = (index) => {
setItems(items.filter((item, i) => i !== index))
areItemsCompleted()
}
当我在函数之外将元素打印到控制台时，它可以工作，但是该项没有正确地呈现。它只从jsx中移除数组的最后一个元素，但是items
浏览 3提问于2020-06-19得票数 3
我正在做一个离子应用程序，并与Laravel服务器一起工作。问题是，我在服务器中有一个存储项目的列表。在离子应用程序中，我将请求服务器提供项目信息，以创建表单。我这里有我的密码
<div ng-repeat="itemGroup in mydata">
<div class="item item-divider nn-card-header">
{{itemGroup.name}}
</div>
<ion-list>
<ion-item ng-repea
浏览 1提问于2016-05-16得票数 0
回答已采纳
1回答
我学习AngularJS，我无法理解ng-options指令中表达式的含义，这里有一个指向的链接，以下是我所不能理解的：
ng-options="net for net in networks"
我查看了，文档将上面的表达式解释为：
数组中值的标签
因此，每个选项中都有value属性，值表示数组中的键，我的问题是表达式net for net in networks是如何工作的--我的意思是：
我假设第一个net是键，第二个是值，所以表达式“说明”该值的键在netwroks数组中，并将其放置到每个选项元素的每个值属性中。
我不明白的是net for net是如何影
浏览 2提问于2014-09-27得票数 0
回答已采纳
在本例中，如何从数组中删除特殊数字？我在数组数字中有9个数字，并且数组数组为空。我想从nums中删除一个随机索引(let rand)，并将其添加到narr中。在narr推送是正确的，但当我尝试通过pop，splice，slice等从nums中删除相同的数字时，它没有正确的答案。我应该使用哪种方法？
function sudoku(arr){
let nums = [1,2,3,4,5,6,7,8,9];
let narr = [];
for(let i = 0; i<9; i++){
let rand = Math.floor(Math.random()*nums.l
浏览 22提问于2020-02-20得票数 3
当我在控制器中像这样更新我的$scope时
$scope.item = "Hello";
然后，似乎删除了item的整个DOM，然后再次添加。这似乎很好，但是如果我有一个items列表
$scope.items = Resource.query();
要更新所有项，然后删除items的所有DOM，然后重新添加，这看起来很糟糕，而且很笨拙--在$scope更新时，是否存在删除然后添加DOM元素的问题？
如果在删除所有这些$scope.items部分并重新添加这些ng-repeat部分时，在多个ng-repeat语句中使用ng-repeat及其子语句，则此问题将进一步恶化。
编辑
浏览 5提问于2015-09-25得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
