用Angular動態添加、刪除輸入框並計算總值

時間 2019-11-13

原文原文鏈接

這個功能自己並不複雜，但仍是要注意，每一個ng-model的對象必須是不一樣的，這樣才能把它們分隔開。html

下面是完整代碼：
數組

JS：code

 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：htm

<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。但若是有什麼更漂亮的作法，懇請大神分享一下，由於我知道這樣寫並非很優雅。
對象