Question

我正在尝试自动添加两个列数据，但模型personalDeatail.add值中的数据不会自动更新。我究竟做错了什么？？我可以在输入框中获取添加的数据，但是在personalDetail.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;
        });
    };    

     }]);

Answer 1

这是因为你没有为第3个输入框设置ng-model，你可以编写一个函数来计算总和，并将值赋给$ 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="angular.js@1.4.7" 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>

模型personalDeatail.add值中的数据不会自动更新。我究竟做错了什么？

1 个答案: