Angular动态添加、删除输入框并计算值实例代码


Posted in Javascript onMarch 29, 2017

Angular动态添加、删除输入框并计算值实例代码

摘要: 在学习群中交流时,有人分享了一个动态添加输入框的方法,我在其基础上进行了一些改进

这个功能本身并不复杂,但还是要注意,每个ng-model的对象必须是不同的,这样才能把它们分隔开。

下面是完整代码:

JS:

angular.module("myApp",[])
 .controller("inputController",function($scope){
    $scope.items=[];  //初始化数组,以便为每一个ng-model分配一个对象
    var i=0;
    $scope.getResult=function(){   //计算输入框的总值
      var result=0;
      angular.forEach($scope.items,function(item,key){
        result+=parseInt($scope.items[key]);
      })
      $scope.result=result;
    }

    $scope.Fn= {
      add: function () {     //每次添加都要给items数组的长度加一
        $scope.items[i] = 0;
        i++;
      },
      del: function (key) {   //每次删除一个输入框都后要让i自减,否则重新添加时会出bug
        console.log(key);
        $scope.items.splice(key, 1);
        i--;
        $scope.getResult();  //每次删除时得重新计算总值
      }
    }

  })

HTML:

<body ng-controller="inputController">
  <div ng-repeat="(key,item) in items track by $index">  <!-- 借助track by $index进行循环-->
     <input ng-model="items[key]"/><button ng-click="Fn.del(key)">删除</button>
  </div>

{{result}}
<button ng-click="Fn.add()">Add</button>
  <button ng-click="getResult()">Result</button>
</body>

应该没有什么bug。但如果有什么更漂亮的做法,恳请大神分享一下,因为我知道这样写并不是很优雅。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
JS变量及其作用域
Mar 29 #Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 #Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 #Javascript
vue2组件实现懒加载浅析
Mar 29 #Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 #Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 #Javascript
You might like
php记录代码执行时间(实现代码)
2013/07/05 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python实现网站的模拟登录
2016/01/04 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
高中生自我评语大全
2014/01/19 职场文书
读群众路线心得体会
2014/03/07 职场文书
骨干教师培训方案
2014/05/06 职场文书
七夕活动策划方案
2014/08/16 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python