Angular- 从中获取数据绑定值

Question

I'm having a complete table as a form, most of the cells in the table(td) are input fields

 <td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td> <td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.two"> </td> <td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.three"> </td> <td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.four"> </td> <td><span id="testingInput2" ng-model="addResources.total">{{addResources.one+addResources.three}}</span> </td> <td><span id="testingInput2" ng-model="addResources.totalsecond">{{addResources.two+addResources.four}}</span> </td>

when i try to get $scope.addResources.total after submitting , it's giving null value, and i had to use angular.element() to get it's value. What might be the issue here

Edit 1:

those who are wondering why, have a look at first 4 columns, they are user input rest are all with calculation, as user enters/changes value the last 5 columns will updates by itself. If i need to have row wise calculation (total or percentage) now i need those ng-model value

Answer 1

First ng-model directive should be used within an input (textarea, select...) element, as the documentation says. [ https://docs.angularjs.org/api/ng/directive/ngModel]

As addResources.total as addResources.totalsecond are calculated fields you could have them calculated on your controller, there is no reason to have ng-model inside the span.

Answer 2

try this. aslo you can compute it in controller.

 var app = angular.module("testApp", []); app.controller('testCtrl', function($scope){ $scope.addResources = {total:""}; $scope.submit = function(total){ alert(total); } });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="testApp" ng-controller="testCtrl"> <table> <tr> <td> <input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td> <td> <input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.two"> </td> <td> <input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.three"> </td> <td> <input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.four"> </td> <td> <input type="hidden" id="testingInput2" ng-model="addResources.total" ng-value="addResources.total = addResources.one + addResources.three ">{{addResources.one+addResources.three}} </td> </tr> {{addResources.total}} </table> <input type="button" value="submit" ng-click="submit(addResources.total)"> </div>