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 相关文章推荐
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
js实现本地时间同步功能
Aug 26 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
python快速排序代码实例
2013/11/21 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python实现转圈打印矩阵
2019/03/02 Python
python中while和for的区别总结
2019/06/28 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
《影子》教学反思
2014/02/21 职场文书
领导调研接待方案
2014/02/27 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
教师节宣传方案
2014/05/23 职场文书
营销团队口号
2014/06/06 职场文书
部门活动策划方案
2014/08/16 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
Fluentd搭建日志收集服务
2022/09/23 Servers