javascript - Angular-从 <span> 获取数据绑定(bind)值

Question

我有一个完整的表格作为表单，表格中的大部分单元格(td)都是输入字段

<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>

当我在提交后尝试获取 $scope.addResources.total 时，它给出了 null 值，我必须使用 angular.element() 来获取它的值。这里可能存在什么问题

编辑1:

那些想知道为什么的人，看看前 4 列，它们是用户输入的其余部分都是经过计算的，当用户输入/更改值时，最后 5 列将自行更新。如果我需要进行逐行计算(总计或百分比)，现在我需要那些 ng-model 值

Answer 1

试试这个。您也可以在 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>