Angular-从<span>获取数据绑定值

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

编辑1：

那些想知道为什么，看看前4列，他们是用户输入休息都是计算，当用户输入/更改值时，最后5列将自行更新。如果我现在需要行计算（总计或百分比），我需要那些ng模型值

Answer 1

首先应该在输入（textarea，select ...）元素中使用ng-model指令，正如文档所述。 [https://docs.angularjs.org/api/ng/directive/ngModel]

作为addResources.totalsecond的addResources.total是计算字段，您可以在控制器上计算它们，没有理由在范围内使用ng-model。

Answer 2

试试这个。你可以在控制器中计算它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;