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 相关文章推荐
点击进行复制的JS代码实例
Aug 23 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
JS清除选择内容的方法
Jan 29 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
Element Badge标记的使用方法
Jul 27 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作的文本留言本的例子(五)
2006/10/09 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
类的核心特性有哪些
2014/01/01 面试题
电脑教师的教学自我评价
2013/11/26 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
年终考核评语
2014/01/19 职场文书
社区党员先进事迹
2014/01/22 职场文书
求职自荐信的格式
2014/04/07 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL