开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular ng-repeat如何添加和

删除元素？

Angular中的ng-repeat指令用于在HTML模板中循环显示数组或对象的元素。要添加和删除元素，可以通过操作数据源来实现。

添加元素：

在控制器中定义一个数组或对象，作为数据源。
使用ng-repeat指令在HTML模板中循环显示数据源的元素。
在控制器中使用相应的方法，向数据源中添加新的元素。

例如，假设有一个控制器和一个数组作为数据源：

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.items = ['item1', 'item2', 'item3'];
    
    $scope.addItem = function() {
      $scope.items.push('new item');
    };
  });

在HTML模板中使用ng-repeat指令循环显示数组元素，并添加一个按钮来调用添加元素的方法：

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="item in items">{{item}}</div>
  <button ng-click="addItem()">Add Item</button>
</div>

点击"Add Item"按钮后，新的元素将被添加到数组中，并在页面上显示出来。

删除元素：

在控制器中使用相应的方法，从数据源中删除指定的元素。

例如，修改上述控制器的代码，添加一个删除元素的方法：

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.items = ['item1', 'item2', 'item3'];
    
    $scope.addItem = function() {
      $scope.items.push('new item');
    };
    
    $scope.removeItem = function(index) {
      $scope.items.splice(index, 1);
    };
  });

在HTML模板中修改ng-repeat指令，添加一个按钮来调用删除元素的方法，并传递元素的索引：

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="(index, item) in items">
    {{item}}
    <button ng-click="removeItem(index)">Remove</button>
  </div>
  <button ng-click="addItem()">Add Item</button>
</div>

点击每个元素后面的"Remove"按钮，对应的元素将从数组中删除，并在页面上消失。

腾讯云相关产品推荐：

云服务器CVM：提供弹性计算能力，满足各种业务需求。产品介绍
云数据库MySQL：稳定可靠的关系型数据库服务。产品介绍
云存储COS：安全可靠的对象存储服务，适用于存储和处理大规模非结构化数据。产品介绍
人工智能平台AI Lab：提供丰富的人工智能开发工具和服务，帮助开发者构建智能应用。产品介绍
物联网平台IoT Hub：连接和管理物联网设备，实现设备数据的采集和控制。产品介绍
区块链服务：提供安全可信的区块链技术和解决方案，支持构建去中心化应用。产品介绍

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularJS：如何使用自定义指令来取代ng-repeat

ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数。用于监听模型变化，当你的模型部分发生变化时它会通知你。...创建UL标签作为容器用于显示列表我们选择动态加载List中的数据，首先添加div标签，并命名为"repeater-alternative"用于渲染流中。...如何获取分配CollectionObject的时间 Angular会监控$scope变量值得改变，一旦值被修改，则$watch将被触发，所以需要将CollectionObject赋值逻辑放到$scope...//$elem.append(tableRow); }); } } }); 总结在本文中，主要模拟了ng-repeat的工作方式和逻辑，但只限于静态内容...，所以输出结果与调用ng-repeat结果相同，但是渲染更快，因为该方法只有一种数据绑定方式和少量的$watch。

2.4K7 0

AngularJS系列之常用指令

这节给大家介绍一下AngularJS中一些常用的指令，例如：ng-app、ng-init、ng-repeat、ng-model等等之类的指令。...> 使用 ng-repeat 来循环数组 {{ x }} ...除了上面说到的一些系统指令外，AngularJS中还可以自己定义指令，下面就给大家介绍一下AngularJS是如何实现自定义指令的：创建自定义的指令除了 AngularJS 内置的指令外，我们还可以创建自定义指令...你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。...restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。利用自定义指令就可以实现很多自己想要的功能了，是不是非常方便呀。如对内容有问题或有疑义，请及时提出，不甚感谢。

2.1K6 0

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象，有可用的方法和属性。 Scope 可应用在视图和控制器上。...---- 如何使用 Scope 当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递: AngularJS 实例控制器中的属性对应了视图上的属性： <div ng-app...视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。 ---- Scope 概述 AngularJS 应用组成如下： View(视图), 即 HTML。...scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。...{{x}} var app = angular.module('myApp', [

1.5K2 0

AngularJS 表格

ng-repeat 指令可以完美的显示表格。 ---- 在表格中显示数据使用 angular 显示表格是非常简单的： AngularJS 实例 <script src="https://cdn.bootcss.com/<em>angular</em>.js/1.6.3...$scope.names = result.data.records; }); }); 废弃声明 (v1.5) v1.5 中$http 的 success <em>和</em>...} {{ x.Country | uppercase }} ---- 显示序号 ($index) 表格显示序号可以在中<em>添加</em>...}} {{ x.Country }} ---- 使用 $even <em>和</em> $odd AngularJS 实例 <tr

1.8K1 0

一步一步学Vue (一)

2、TODO LIST 由于有angular的经验，不会按部就班的过vue的文档，那样也没什么意思，这里以todolist作为Hello world的延伸，由于和angular类似的数据驱动的特点，我们不需要关注如何操作...刷新页面，输入表单项，打开控制台可以看到输出项，运行结果入下图所示：结果和我们预期的一样，接着我们把结果以列表的形式渲染出来，在angular中，我们一般通过ng-repeat指令，实现列表渲染，那么在...vue中，有没有类似的指令呢，查文档发现的确有一指令叫做v-for，用法和作用都和ng-repeat类似，基于ng-repeat经验，我们使用v-for对todolist进行渲染，修改代码如下： <table...，及动态刷新了列表：有添加就有删除，接下来，我们列表中，增加删除操作，和所有mvvm框架一样，我们考虑的出发点一定要规避dom，一定要从数据驱动UI的方式来思考，如果删掉UI项，那么根据数据驱动UI...的使用经验，这里增加的方式有些区别，angular在ng-repeat中有内置变量index,所以在事件处理上，我们就会通过index作为数组项索引，事件绑定也会类似ng-click="remove(

3.6K2 0

【一起来烧脑】一步学会AngularJS系统

{{ x }} ng-repeat指令用在一个对象数组上： <div ng-app=""...指令对于集合中（数组中）的每个项会克隆一次 HTML 元素创建自定义的指令可以使用.directive函数来添加自定义的指令作用域作用域（scope）是应用在HTML和JavaScript之间的纽带...firstName + " " + lastName}} 过滤器过滤器可以使用一个管道字符（|）添加到表达式和指令中...创建下拉列表 {{x}} ng-repeat 指令可以很好的显示表格 ...scope.lastName = "Holmes"; }); 表单 HTML控件 input元素、select元素、button元素、textarea元素输入验证 AngularJS表单和控件可提供验证功能

5.5K2 0

如何使用Angular CLI和PM2运行Angular应用程序

在本文中，我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...要求您必须在服务器上安装以下软件包才能继续： Node.js和NPM 角度CLI PM2 注意：如果您已在Linux系统上安装了Node.js和NPM ，请跳至第2步。...要安装最新版本的Node.js ，首先在系统上添加NodeSource存储库，如图所示，然后安装该软件包。不要忘记为要在Linux发行版上安装的Node.js版本运行正确的命令。...$ node -v $ npm -v 检查Node.js和NPM版本第2步：安装Angular CLI和PM2 接下来，使用npm包管理器安装Angular CLI和PM2 ，如图所示。...在本指南中，我们展示了如何使用Angular CLI和PM2流程管理器运行Angular应用程序。

2.9K4 0

AngularJS系列之select下拉选择第一个选项为空白的解决办法

-- 这里是重点，必须将value值设置成空字符串，否则第一个选项还是会留空白出来--> {{x.site...--注意这个地方要和下面的设置的值要一致 --> {{x.site}} }); 该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。... 从例子中就可以看出，其实就是在value中添加自己想要的值信息，然后再控制器中进行传初始值。... 从上面的例子可以很明显的看出，只要在控制器中添加相应的初始值，就可以实现select中默认选中的效果了。

3.1K7 0

第215天：Angular---指令

指令（Directive） AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行在 AngularJS...['ngSanitize']); 18 19 20 21 3、ng-repeat指令 ng-repeat指令用来编译一个数组重复创建当前元素，如...37 38 }]); 39 40 41 42 4、ng-class 指令 ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名...，键为class名，值为bool类型表示是否添加该类名 1 2 3 29 30 9、ng-checked ng-checked 和 ng-selected 只会做数据到视图的同步，不会做视图到数据的同步

3.2K3 0

Angularjs基础(三)

Scope是一个对象，有可能的方法和属性。　　　　　　　　Scope可应用在视图和控制器上。...如何使用Scope 　　　　　　当你在AngularJS创建控制器时，你可以将$scope对象当做一个参数传递：　　　　　　　　　　实例：控制器中的属性对应了视图上的属性：　　　　　　　　　　　　...$scope对象时，视图（HTML）可以获取了这些属性　　　　　　　　　　　　视图中，你不需要添加$scope前缀，只需要添加属性名即可，如{{carname}}。...scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。　　　　　　实例：如果你改变了视图，模型和控制器也会相应更新。　　　　　　　　...实例：当我们使用ng-repeat 指令时，没个重复项都访问了当前的重复对象。

3.1K5 0

Angularjs基础(五)

ng-options="x for in names"> 　　　　　　　　　　　　　　　　　　　　　　　　　　　　var app = angular.module...的选项的一个对象,ng-repeat是一个字符串。...在表格中显示数据　　　　　　使用angular显示表格是非常简单的　　　　　　　　实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　显示序号($index) 　　　　表格显示序号可以在中添加...x.Name}} 　　　　　　　　　　　　{{x.Country}} 　　　　　　　　　　　　　　　　使用$even 和$

3.3K5 0

如何使用Angular CLI和PM2运行Angular应用程序

在本文中，我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...第1步：在Linux中安装Node.js 要安装最新版本的Node.js，首先在系统上添加NodeSource存储库，如图所示，然后安装该软件包。...CLI和PM2 接下来，使用npm包管理器安装Angular CLI和PM2，如图所示。...Angular CLI主页：https://angular.io/cli PM2主页：http://pm2.keymetrics.io/ 在本指南中，我们展示了如何使用Angular...CLI和PM2流程管理器运行Angular应用程序。

2.2K3 0

Angular 项目路径添加指定的访问前缀

这里使用的框架是 Angular，"@angular/core": "~12.1.0" 更改项目前缀假设我们添加的前缀为 /jimmy/ 1....更改路由前缀在 app.module.ts 文件中添加 APP_BASE_HREF： import { APP_BASE_HREF } from '@angular/common'; @NgModule...更改打包的文件这一步非必需，我们这里只是统一一下名称为 jimmy 而已更改 angular.json 的输出文件： { "projects": { ......只需要添加 --base-href=/jimmy/ 即可，如下： "scripts": { "build": "ng build --base-href=/jimmy/" } 运行 npm run

1.2K2 0

AngularJS 指令

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。...稍后您将学习更多有关控制器和模块的知识。 ---- ng-model 指令 ng-model 指令绑定 HTML 元素到应用程序数据。...---- ng-repeat 指令 ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。...你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。...runoob-directive: AngularJS 实例 body ng-app="myApp"> var app = angular.module

3.1K2 0

AngularJS 动画

AngularJS 使用动画需要引入 angular-animate.min.js 库。... 还需在应用中使用模型...AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-switch ng-show...和 ng-hide 指令用于添加或移除 ng-hide class 的值。...其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类。

2.1K3 0

Angularjs基础(二)

AngularJS 表达式很像JavaScript表达式：他们可以包含文字，运算符和变量。　　　　...AngularJS 字符串　　Angular字符串就像JavaScript字符串：　　　　实例：　　　　　　<div ng-app"" ng-init="firstName='John...AngularJs通过内置的指令来为应用<em>添加</em>功能,ng-app 指令初始化一个 AngularJS 应用程序. 　　　　AngularJs允许你自定义指令。　　　　...你可以使用.directive函数来<em>添加</em>自定义的指令。　　　　要调用自定义指令，HTML元素张需<em>添加</em>自定义指令名。　　　　...实例：　　　　　　　　通过<em>添加</em> restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用: 　　　　　　　　var app = angular.module("myApp

3.4K6 0

AngularJS指令「建议收藏」

AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。...2.重复HTML元素 ng-repeat指令会重复一个HTML元素：使用 ng-repeat...来循环数组 { { x }} ng-repeat指令用在一个对象数组上： *.限制调用 var app = angular.module("myApp", []); app.directive("runoobDirective

1.1K2 0

【AngularJS】 # AngularJS入门

函数，可以添加或修改属性 scope的属性和方法 ...AngularJS 过滤器过滤器可以使用一个**管道字符（|）**添加到表达式和指令中。 6.1....向指令添加过滤器根据表达式排列数组 orderBy:” “ <li ng-repeat...在 service 和 controller 需要时创建。...创建了两个 URL： /first 和 /second。每个 URL 都有对应的视图和控制器。

23.1K6 0

angularjs

最近在开发过程中，发现一个问题，在使用angularjs的ng-repeat遍历过程中，如果遍历的数组中包含相同的项，则会抛错。如下例：测试 {{item}} </...var app = angular.module('myApp', []); app.run(function($rootScope) { $rootScope.names =...track by $index {{item}}

1.5K3 1

（4）Angular的开发

下载最新的 Angular 包 MVC 是一种应用程序的开发思想为了解决应用程序展示结构，业务逻辑之间的紧耦合关系模型处理数据和业务逻辑视图向用户展示数据控制器组织调度相应的处理模型...scope暴露数据模型（数据，行为） AngularJS 表达式可以包含字母，操作符，变量 ng-repeat指令用来编译一个数组重复创建当前元素 {{item}} {{item.content...dd/yyyy 'at' h:mma"}} limitto 过滤器 limitto过滤器用于限制一个字符串或数组展示的长度： <li ng-repeat

3.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭