Angular動(dòng)態(tài)添加、刪除輸入框并計(jì)算值實(shí)例代碼

更新時(shí)間：2017年03月29日 14:56:30 作者：lee1994522

這篇文章主要介紹了Angular動(dòng)態(tài)添加、刪除輸入框并計(jì)算值實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

Angular動(dòng)態(tài)添加、刪除輸入框并計(jì)算值實(shí)例代碼

摘要: 在學(xué)習(xí)群中交流時(shí)，有人分享了一個(gè)動(dòng)態(tài)添加輸入框的方法，我在其基礎(chǔ)上進(jìn)行了一些改進(jìn)

這個(gè)功能本身并不復(fù)雜，但還是要注意，每個(gè)ng-model的對(duì)象必須是不同的，這樣才能把它們分隔開(kāi)。

下面是完整代碼：

JS：

angular.module("myApp",[])
 .controller("inputController",function($scope){
    $scope.items=[];  //初始化數(shù)組，以便為每一個(gè)ng-model分配一個(gè)對(duì)象
    var i=0;
    $scope.getResult=function(){   //計(jì)算輸入框的總值
      var result=0;
      angular.forEach($scope.items,function(item,key){
        result+=parseInt($scope.items[key]);
      })
      $scope.result=result;
    }

    $scope.Fn= {
      add: function () {     //每次添加都要給items數(shù)組的長(zhǎng)度加一
        $scope.items[i] = 0;
        i++;
      },
      del: function (key) {   //每次刪除一個(gè)輸入框都后要讓i自減，否則重新添加時(shí)會(huì)出bug
        console.log(key);
        $scope.items.splice(key, 1);
        i--;
        $scope.getResult();  //每次刪除時(shí)得重新計(jì)算總值
      }
    }

  })

HTML：

<body ng-controller="inputController">
  <div ng-repeat="(key,item) in items track by $index">  <!-- 借助track by $index進(jìn)行循環(huán)-->
     <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>

應(yīng)該沒(méi)有什么bug。但如果有什么更漂亮的做法，懇請(qǐng)大神分享一下，因?yàn)槲抑肋@樣寫(xiě)并不是很優(yōu)雅。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

AngularJS路由Ui-router模塊用法示例
這篇文章主要介紹了AngularJS路由Ui-router模塊用法,結(jié)合實(shí)例形式分析了Ui-router模塊的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-05-05
在AngularJs中設(shè)置請(qǐng)求頭信息(headers)的方法及不同方法的比較
在AngularJs中有三種方式可以設(shè)置請(qǐng)求頭信息，文中對(duì)每種方法給大家介紹的非常詳細(xì)，選擇那種方式可以根據(jù)自己的需求，感興趣的朋友跟隨腳本之家小編一起看看吧
2018-09-09
angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
AngularJS 防止頁(yè)面閃爍的方法
我們知道在應(yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這篇文章主要介紹了AngularJS 防止頁(yè)面閃爍的方法,需要的朋友可以參考下
2017-03-03
淺談Angular4實(shí)現(xiàn)熱加載開(kāi)發(fā)旅程
本篇文章主要介紹了淺談Angular4實(shí)現(xiàn)熱加載開(kāi)發(fā)旅程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
詳解Angular 自定義結(jié)構(gòu)指令
本篇文章主要介紹了詳解Angular 自定義結(jié)構(gòu)指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
angularjs實(shí)現(xiàn)與服務(wù)器交互分享
AngularJS是Google開(kāi)發(fā)的純客戶(hù)端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專(zhuān)為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。
2014-06-06
AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法
在AngularJS中，有時(shí)候需要監(jiān)視Scope中的某個(gè)變量，因?yàn)樽兞康母淖儠?huì)影響一些界面元素的顯示，接下來(lái)通過(guò)本文給大家介紹AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法，需要的朋友參考下吧
2016-01-01
詳解angularjs中如何實(shí)現(xiàn)控制器和指令之間交互
本篇文章主要介紹了詳解angularjs中如何實(shí)現(xiàn)控制器和指令之間交互，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05