在AngularJS中如何动态添加数据并删除?

下面我就为大家分享一篇angularjs动态添加数据并删除的实例,具有很好的参考价值,希望对大家有所帮助。

如下所示:

nbsp;html>TodoListbody {padding: 0;margin: 0;}.todo {width: 300px;margin: 100px auto;}.todo dd {overflow: hidden;}.todo input[type="checkbox"] {float: left;}.todo a {float: right;}

登录后复制待办事项{{todo.text}}删除已办事项{{doneTodos.length}}{{todo.text}}删除// 定义一个模块var App = angular.module('App', []);// 定义一个控制器App.controller('TodoListController', ['$scope', function($scope) {// 待办事项$scope.todos = [];// 已完成事项$scope.doneTodos = [];// $scope.todo = '';// 回车时调用ng-submit,往待办事项中添加数据$scope.addItem = function () {// 向数组中添加数据$scope.todos.push({text:$scope.todo, checked: false});// 清空输入框$scope.todo = '';}// 勾选时完成$scope.done = function (index, ev) {// console.log(index);// console.log($scope.todos);// 从待办事项中删除var tmp = $scope.todos.splice(index, 1);tmp[0].checked = !tmp[0].checked;// 将删除的事项添加到已完成里$scope.doneTodos = $scope.doneTodos.concat(tmp);ev.preventDefault();}// 取消已完成$scope.undone = function (index, ev) {// 从已完成数据中删除var tmp = $scope.doneTodos.splice(index, 1);tmp[0].checked = !tmp[0].checked;// 将事项添加到待办事项中$scope.todos = $scope.todos.concat(tmp);// ev.preventDefault();}// 删除事项,传递当前索引和完整数据$scope.delete = function (index, todos) {// $scope.doneTodos.splice(index, 1);// console.log(todos);// 删除索引值对应的事项todos.splice(index, 1);}}])// var arr = [0, 1, 2, 3, 4];// arr.splice(2,1)

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详细讲解FastClick源码(详细教程)

利用vue和element-ui如何实现表格内容分页

利用vue如何实现将时间戳转换成自定义时间格式

以上就是在AngularJS中如何动态添加数据并删除?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2750073.html

(0)
上一篇 2025年3月8日 05:30:46
下一篇 2025年2月18日 12:50:53

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 详细讲解JS严格模式知识点有哪些?

    本篇文章给大家整理了js严格模式下的相关知识点以及代码实例分享,感兴趣的一起学习下吧。 所谓严格模式其实就是一个不会赋值给任何变量的字符串 “use strict” 如果在全局作用域下 给出这个提示,那整个脚本将采用严格模式。也可以只在函数…

    编程技术 2025年3月8日
    200
  • 详细解读在js函数相关内容

    本篇文章给大家简要分析了js中函数相关的重要知识点,对此有兴趣的朋友可以参考学习下。 要知道,在js中,引用类型是一种数据结构,包含5种引用类型,分别是Object,data,Array,re请输入代码gExp,Function。今天我们就…

    编程技术 2025年3月8日
    200
  • 在Vue2.5中通过json文件读取数据的方法

    本文通过实例代码给大家详细介绍了vue2.5通过json文件读取数据的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧 1.准备工作 1.1 webpack.dev.conf.js 在 const portfinder = requir…

    编程技术 2025年3月8日
    200
  • JS基础函数使用简介

    这次给大家带来js基础函数使用简介,js基础函数使用的注意事项有哪些,下面就是实战案例,一起来看一下。 /** 函数*  – 函数也是一个对象*  – 函数中可以分钟一些功能(功能),在需要时可以执行这些功能(代码)*  – 函数中可以保存…

    编程技术 2025年3月8日
    200
  • js基础提升教学之变量

    这次给大家带来js基础提升教学之变量,js变量使用的注意事项有哪些,下面就是实战案例,一起来看一下。 一门正常的语言,函数前都属于基础部分 格式:var  变量名称=变量值;(在135版本,必须加声明,即严格模式) —&#821…

    编程技术 2025年3月8日
    200
  • js基础提升学习之基本数据类型

    这次给大家带来js基础提升学习之基本数据类型,使用js基本数据类型的注意事项有哪些,下面就是实战案例,一起来看一下。 javascript的数据类型分为两大类型: 1、基本数据类型:       字符串(String)       数字(N…

    编程技术 2025年3月8日
    200
  • 在Angular.js中使用Swiper插件如何解决不能滑动的问题

    下面我就为大家分享一篇解决angular.js中使用swiper插件不能滑动的问题,具有很好的参考价值,希望对大家有所帮助。 我们都知道swiper是交互体验十分好的轮播插件 但是通过angular(ng-repeat)循环出来的swipe…

    编程技术 2025年3月8日
    200
  • js基础提升学习之运算符和表达式

    这次给大家带来js基础提升学习之运算符和表达式,使用js运算符和表达式的注意事项有哪些,下面就是实战案例,一起来看一下。 怎样才能得到一个数的二进制呢? 格式:alert( 变量名.toString(2) ); 如果想要得到一个数的其他进制…

    编程技术 2025年3月8日
    200
  • 在Angular5中如何调用第三方js插件(详细教程)

    下面我就为大家分享一篇angular5中调用第三方js插件的方法,具有很好的参考价值,希望对大家有所帮助。 话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和ra…

    编程技术 2025年3月8日
    200
  • js基础提升学习之三大流程及switch语句

    这次给大家带来js基础提升学习之三大流程及switch语句,使用js三大流程及switch语句的注意事项有哪些,下面就是实战案例,一起来看一下。 必知知识: 1、代码运行顺序:自上而下,自左而右 2、分支:单分支,多分支,多分支,switc…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论