Angular- Get data-bind value from <span>

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

bind ng-model to input(hiden) element.

Hadi
– Hadi

2016-05-04 10:17:28 +00:00
Commented May 4, 2016 at 10:17 — Hadi
– Hadi, Commented May 4, 2016 at 10:17

Hadi · Accepted Answer · 2016-05-04 11:04:23Z

1

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>

edited May 4, 2016 at 11:04

answered May 4, 2016 at 10:25

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vignesh Rajarajan Over a year ago

Hi, thanks for the suggestion, is there any other elegant way.. i have updated my question please have a look

Hadi Over a year ago

did u test my answer??

Vignesh Rajarajan Over a year ago

yeah tested, no change,, it's not getting anything

Vignesh Rajarajan Over a year ago

yep, working.. but the no of hidden inputs increase for different calculations.. or is there any other way to get that ng-model

Hadi Over a year ago

may be change it to text and use readonly attribute for it help u.

Alberto · Accepted Answer · 2016-05-04 10:25:06Z

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.

answered May 4, 2016 at 10:25

Alberto

1291 silver badge12 bronze badges

4 Comments

Vignesh Rajarajan Over a year ago

this is the requirement, like live change of data for end user,

Alberto Over a year ago

I don't understand, {{addResources.one+addResources.three}} could be calculated on the controller and oupted on the view, and when submiting the form use this calculation

Vignesh Rajarajan Over a year ago

added more details, please have a look

Alberto Over a year ago

in your controller you could have a function getTotal() { return addResource.one + addResource.three } and in your view you can bind it {{ testCtrl.getTotal() }} and your submit will be submit(testCtrl.getTotal()). There is no need to use ng-model for calculated fields, as ng-model is used to get two way data-biding

Collectives™ on Stack Overflow

Angular- Get data-bind value from <span>

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related