CODEWITHSUNDEEP
javascripthtmlangularjs
Vignesh Rajarajan
Vignesh Rajarajan

Reputation: 99

Angular- Get data-bind value from <span>

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: enter image description here

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

Upvotes: 2

Views: 2729

Answers (2)

Hadi
Hadi

Reputation: 17289

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>

Upvotes: 1

Alberto
Alberto

Reputation: 129

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.

Upvotes: 1

Related Questions