个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 05:10:42 26 4
gpt4 key购买 nike

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

     }]);

最佳答案

发生这种情况是因为您没有为第三个输入框设置 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>

关于javascript - 模型personalDeatail.add 值中的数据不会自动更新。我究竟做错了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41406839/

26 4 0
文章推荐： javascript - HTML 和 Jquery 中的图像更改
文章推荐： c# - C++ 和 SharpZipLib
文章推荐： c++ - 关于构造函数调用和继承顺序的一些困惑
文章推荐： c++ - pyrDown 错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com