Javascript 模型personalDeatail.add value中的数据不会自动更新。我做错了什么？_Javascript_Html_Angularjs

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

javascript html angularjs

Javascript 模型personalDeatail.add value中的数据不会自动更新。我做错了什么？,javascript,html,angularjs,Javascript,Html,Angularjs,我试图自动添加两列数据，但model PersonalDetail.add value中的数据不会自动更新。我做错了什么？？我可以在输入框中获取添加的数据，但在personalDetail中不会更新相同的数据。添加？请帮忙 index.html <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script src="script/angular.min.js"><

我试图自动添加两列数据，但model PersonalDetail.add value中的数据不会自动更新。我做错了什么？？我可以在输入框中获取添加的数据，但在personalDetail中不会更新相同的数据。添加？请帮忙

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;
        });
    };    

     }]);

从表中动态添加或删除行
第一
2号
添加
{{personalDetails}}
script.js
var-app=angular.module（“myapp”，[]）；app.controller（“ListController”、[“$scope”、函数（$scope）{
$scope.personalDetails=[
{
“num1”：“，
“num2”：“，
“添加”：”
}];
$scope.addNew=函数（personalDetail）{
$scope.personalDetails.push（{
“num1”：“，
“num2”：“，
“添加”：“
});
};
$scope.parseFloat=函数（值）
{
返回浮点（值）；
} 
$scope.remove=函数（）{
var newDataList=[]；
$scope.selectedAll=false；
angular.forEach（$scope.personalDetails，函数（已选）{
如果（！已选定。已选定）{
newDataList.push（选中）；
}
}); 
$scope.personalDetails=newDataList；
};
$scope.checkAll=函数（）{
如果（！$scope.selectedAll）{
$scope.selectedAll=true；
}否则{
$scope.selectedAll=false；
}
angular.forEach（$scope.personalDetails，函数（personalDetail）{
personalDetail.selected=$scope.selectedAll；
});
};    
}]);

这是因为您没有为第三个输入框设置ng型号，您可以编写一个函数来计算总和，并将值赋给$scope变量

演示

var-app=angular.module（“myapp”，[]）
app.controller（“ListController”、[“$scope”、函数（$scope）{
$scope.personalDetails=[{
“num1”：“，
“num2”：“，
“添加”：”
}];
$scope.calculateSum=函数（val）{
val.add=parseFloat（val.num1）+parseFloat（val.num2）；
}
$scope.addNew=函数（personalDetail）{
$scope.personalDetails.push({
“num1”：“，
“num2”：“，
“添加”：“
});
};
$scope.parseFloat=函数（值）{
返回浮点（值）；
}
}]);

从表中动态添加或删除行
第一
2号
添加
{{personalDetails}}
这是因为您没有为第三个输入框设置ng型号，
您可以编写一个函数来计算总和，并将值赋给$scope变量
演示

var-app=angular.module（“myapp”，[]）
app.controller（“ListController”、[“$scope”、函数（$scope）{
$scope.personalDetails=[{
“num1”：“，
“num2”：“，
“添加”：”
}];
$scope.calculateSum=函数（val）{
val.add=parseFloat（val.num1）+parseFloat（val.num2）；
}
$scope.addNew=函数（personalDetail）{
$scope.personalDetails.push({
“num1”：“，
“num2”：“，
“添加”：“
});
};
$scope.parseFloat=函数（值）{
返回浮点（值）；
}
}]);

从表中动态添加或删除行
第一
2号
添加