模型personalDeatail.add值中的數據不會自動更新。我究竟做錯了什麼？

我試圖自動添加兩列數據，但模型personalDeatail.add值中的數據未自動更新。我究竟做錯了什麼？？我可以在輸入框中獲取添加的數據，但在personalDetail.add中不會更新相同的數據？請幫助模型personalDeatail.add值中的數據不會自動更新。我究竟做錯了什麼？

的index.html

<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script src="script/angular.min.js"></script> <script src="script/script.js"></script> <script src="script/scripts.js"></script> <title>Dynamically Add-Remove Rows from Table</title> 


    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> 

     <link rel="stylesheet" href="css/style.css"> 


</head> 

<body ng-app="myapp" ng-controller="ListController">  
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="panel panel-default"> 
        <div class="panel-body"> 
         <form ng-submit="addNew()"> 
          <table class="table table-striped table-bordered"> 
           <thead> 
            <tr> 
             <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th> 
             <th>Number1</th> 
             <th>number2</th> 
             <th>Add</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr ng-repeat="personalDetail in personalDetails"> 
             <td> 
              <input type="checkbox" ng-model="personalDetail.selected"/></td> 
             <td> 
              <input type="text" class="form-control" ng-model="personalDetail.num1" required/></td> 
             <td> 
              <input type="text" class="form-control" ng-model="personalDetail.num2" required/></td> 
             <td> 
              <input type="text" class="form-control" value="{{parseFloat(personalDetail.num1)+parseFloat(personalDetail.num2)}}" 
              ></td> 
            </tr> 
           </tbody> 
          </table> 

          <div class="form-group"> 
           <input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove"> 
           <input type="submit" class="btn btn-primary addnew pull-right" value="Add New"> 
          </div> 
         </form> 
         {{personalDetails}} 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> </body> </html> 




script.js 



var app = angular.module("myapp", []); app.controller("ListController", ['$scope', function($scope) { 
    $scope.personalDetails = [ 
     { 
      'num1':'', 
      'num2':'', 
      'add':'' 
     }]; 


     $scope.addNew = function(personalDetail){ 
      $scope.personalDetails.push({ 
       'num1': "", 
       'num2': "", 
       'add': "" 
      }); 
     }; 
     $scope.parseFloat = function(value) 
        { 
         return parseFloat(value); 
         } 

     $scope.remove = function(){ 
      var newDataList=[]; 
      $scope.selectedAll = false; 
      angular.forEach($scope.personalDetails, function(selected){ 
       if(!selected.selected){ 
        newDataList.push(selected); 
       } 
      }); 
      $scope.personalDetails = newDataList; 
     }; 

    $scope.checkAll = function() { 
     if (!$scope.selectedAll) { 
      $scope.selectedAll = true; 
     } else { 
      $scope.selectedAll = false; 
     } 
     angular.forEach($scope.personalDetails, function(personalDetail) { 
      personalDetail.selected = $scope.selectedAll; 
     }); 
    };  

    }]);

來源

2016-12-31 dpak

它的發生，因爲你沒有NG-模型第3個輸入框中設置，你可以寫一個函數來計算總和，並賦值給$ scope變量。

演示

var app = angular.module("myapp", []) 
 
app.controller("ListController", ['$scope', function($scope) { 
 
    $scope.personalDetails = [{ 
 
    'num1': '', 
 
    'num2': '', 
 
    'add': '' 
 
    }]; 
 

 

 
    $scope.calculateSum = function(val) { 
 
    val.add = parseFloat(val.num1) + parseFloat(val.num2); 
 
    } 
 
    $scope.addNew = function(personalDetail) { 
 
    $scope.personalDetails.push({ 
 
     'num1': "", 
 
     'num2': "", 
 
     'add': "" 
 
    }); 
 
    }; 
 
    $scope.parseFloat = function(value) { 
 
    return parseFloat(value); 
 
    } 
 
}]);

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
    <script src="script.js"></script> 
 
    <title>Dynamically Add-Remove Rows from Table</title> 
 
    <link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> 
 
</head> 
 

 
<body ng-app="myapp" ng-controller="ListController"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-body"> 
 
      <form ng-submit="addNew()"> 
 
       <table class="table table-striped table-bordered"> 
 
       <thead> 
 
        <tr> 
 
        <th> 
 
         <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /> 
 
        </th> 
 
        <th>Number1</th> 
 
        <th>number2</th> 
 
        <th>Add</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr ng-repeat="personalDetail in personalDetails"> 
 
        <td> 
 
         <input type="checkbox" ng-model="personalDetail.selected" /> 
 
        </td> 
 
        <td> 
 
         <input type="text" ng-keyup="calculateSum(personalDetail)" class="form-control" ng-model="personalDetail.num1" required/> 
 
        </td> 
 
        <td> 
 
         <input type="text" ng-keyup="calculateSum(personalDetail)" class="form-control" ng-model="personalDetail.num2" required/> 
 
        </td> 
 
        <td> 
 
         <input type="text" ng-model="personalDetail.add" class="form-control" > 
 
        </td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 

 
       <div class="form-group"> 
 
       <input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove"> 
 
       <input type="submit" class="btn btn-primary addnew pull-right" value="Add New"> 
 
       </div> 
 
      </form> 
 
      {{personalDetails}} 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-12-31 09:22:02 Sajeetharan

非常感謝BRO。 – dpak

能否幫助我如何計算添加列的太陽。 – dpak

您的意思是總計添加列 – Sajeetharan

模型personalDeatail.add值中的數據不會自動更新。我究竟做錯了什麼？

回答

相關問題