Angular動態(tài)添加、刪除輸入框并計算值實例代碼

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

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

Angular動態(tài)添加、刪除輸入框并計算值實例代碼

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

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

下面是完整代碼：

JS：

angular.module("myApp",[])
 .controller("inputController",function($scope){
    $scope.items=[];  //初始化數(shù)組，以便為每一個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數(shù)組的長度加一
        $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進(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)該沒有什么bug。但如果有什么更漂亮的做法，懇請大神分享一下，因為我知道這樣寫并不是很優(yōu)雅。

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

您可能感興趣的文章:

相關(guān)文章

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