添加按钮区域后没有重置,显示以前的区域

时间:2016-02-18 12:05:19

标签: angularjs

  

块引用   添加(+)字段后,该区域不会重置其仅显示以前的区域。   块引用



var app = angular.module('Calc', []);
app.controller('Calc_Ctrl', function ($scope) {
     $scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}];
     $scope.addNewChoice = function () { var newItemNo = $scope.choices.length + 1;
          $scope.choices.push({'id' : 'choices' + newItemNo, l2 : 0, b2 : 0});};
$scope.removeChoice = function () { var lastItem = $scope.choices.length - 1;
          if (lastItem !== 0) {$scope.choices.splice(lastItem);}};
$scope.sum = function () { var sum = 0;
          angular.forEach($scope.choices, function (choice) {
               sum += choice.l2 * choice.b2;
          }); return sum;}
$scope.Getarea = function () {
                $scope.total = +document.getElementById("total").value;};
    $scope.$watch($scope.sum, function (value) {
       $scope.total = value;});});

<!DOCTYPE html>
<html>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     <body><div ng-app="Calc" ng-controller="Calc_Ctrl">
               <form  data-ng-repeat="choice in choices">   <br>  {{$index + 1}} : Length:<input type="number" ng-model="choice.l2"  />ft Breadth: <input type="number" ng-model="choice.b2"  />ft
                    Area:  <input type="number" class="form-control text-red bold" id="total" placeholder="Area"  ng-model="total" ng-change="Getarea()">sqft <button  ng-click="addNewChoice()">+</button><button  ng-show="$last" ng-click="removeChoice()">-</button> </br> </form>
               <p class="bold">Area to be treated:</p> <h1>{{( + total + ( + total * 0.05)) | number:2}}<span class="small-text"> </span></h1>
          </div> <script src="ATT.js"></script>
     </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您需要在$scope.$apply()函数的末尾调用addNewChoice,这样ng-repeat将查找选择数组。

但是,再看一下您的代码,问题是您在输入中使用ng-model="total"。为了使其有效,您需要将其更改为ng-model="choice.total"之类的内容并更新该值Getarea()方法。另外,我将choice传递给该函数,因此每次调用函数时,您的函数都会影响正确的选择。