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写的操作系统
Apr 23 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
详解vue 命名视图
Aug 14 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
JS实现电商商品展示放大镜特效
Jan 07 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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python学生信息管理系统实现代码
2019/12/17 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
2015年统计员个人工作总结
2015/07/23 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS