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 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
JS实现音乐导航特效
Jan 06 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
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 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python3并发写文件与Python对比
2019/11/20 Python
Python chardet库识别编码原理解析
2020/02/18 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
如何写一份好的英文求职信
2014/03/19 职场文书
《四季》教学反思
2014/04/08 职场文书
物流专业自荐信
2014/05/23 职场文书
职工宿舍管理制度
2015/08/05 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
《打电话》教学反思
2016/02/22 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL