Angular如何动态添加、删除输入框并计算值

这篇文章主要为大家展示了“Angular如何动态添加、删除输入框并计算值”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular如何动态添加、删除输入框并计算值”这篇文章吧。

成都创新互联公司是一家专注于成都网站建设、做网站与策划设计,可克达拉网站建设哪家好?成都创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:可克达拉等地区。可克达拉做网站价格咨询:028-86922220

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:


    
     删除
  
{{result}} Add   Result

以上是“Angular如何动态添加、删除输入框并计算值”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文名称:Angular如何动态添加、删除输入框并计算值
URL标题:http://pwwzsj.com/article/pidigj.html

其他资讯