get value of element using angularjs

Question

How can i get this .coefficient value using angular? I'm trying to use ng-click with code below, but i can get the whole html only for first .coefficient value (i have a huge bunch of radios just like this). I can solve this problem with jquery, but i need multiply .coefficient value to dynamic add input.

$scope.getCoeff = function(){
    var coefficient = document.body.querySelector('.coefficient');
    console.log(coefficient);
}

<label class="bet-team-box" for="radio-1">
    <input class="bet-main-input" id="radio-1" name="group1" type="radio" ng-click="getCoeff()">
    <span class="fake-label">
        <span class="team">Midnight Sun Esports</span>
        <span class="img-box"><img src="images/logo-team-04.png" alt="image description" width="20" height="20" /></span>
        <span class="coefficient">12.43</span>
    </span>
</label>

jsfiddle

can you wrap all your radios in a directive?

gianni
– gianni

2016-07-05 09:27:02 +00:00
Commented Jul 5, 2016 at 9:27 — gianni
– gianni, Commented Jul 5, 2016 at 9:27
Can you make a fiddle with your code.

Nagarjuna Reddy
– Nagarjuna Reddy

2016-07-05 09:30:23 +00:00
Commented Jul 5, 2016 at 9:30 — Nagarjuna Reddy
– Nagarjuna Reddy, Commented Jul 5, 2016 at 9:30
@gianni yes, no problem with it

Bogdan Tushevskyi
– Bogdan Tushevskyi

2016-07-05 09:30:31 +00:00
Commented Jul 5, 2016 at 9:30 — Bogdan Tushevskyi
– Bogdan Tushevskyi, Commented Jul 5, 2016 at 9:30
@N123 done, if it can help

Bogdan Tushevskyi
– Bogdan Tushevskyi

2016-07-05 09:53:55 +00:00
Commented Jul 5, 2016 at 9:53 — Bogdan Tushevskyi
– Bogdan Tushevskyi, Commented Jul 5, 2016 at 9:53

Elfayer · Accepted Answer · 2016-07-11 10:04:33Z

1

I'd use jqLite and access the value via angular.element(coefficient).text():

If you prefer JSFiddle

angular.module('myApp', []);

angular.module('myApp').controller('MyCtrl', function($scope) {
  $scope.getCoeff = function(e) {
    // Get the input element on a jQlite context
    var $input = angular.element(e.target);

    // Loop through '.fake-label' children
    angular.forEach($input.next().children(), function(child, index) {
      var $child = angular.element(child);

      // Find the '.coefficient' child
      if ($child.hasClass('coefficient')) {
        // Do whatever you want with the value
        console.log(parseFloat($child.text()));
      }
    });
  }
});

label {
  display: block;
}
input:hover {
  cursor: pointer;
}
label:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as vm">
  <label class="bet-team-box" for="radio-1">
    <!-- Send the angular variable $event to access the target element -->
    <input class="bet-main-input" id="radio-1" name="group" type="radio" ng-click="getCoeff($event)">
    <span class="fake-label">
      <span class="team">Midnight Sun Esports</span>
    <span class="img-box"><img src="https://addons.cdn.mozilla.net/user-media/addon_icons/329/329121-64.png?modified=1379222157" alt="image description" width="20" height="20" /></span>
    <span class="coefficient">12.43</span>
    </span>
  </label>
  <label class="bet-team-box" for="radio-2">
    <!-- Send the angular variable $event to access the target element -->
    <input class="bet-main-input" id="radio-2" name="group" type="radio" ng-click="getCoeff($event)">
    <span class="fake-label">
      <span class="team">Night Esports</span>
    <span class="img-box"><img src="https://addons.cdn.mozilla.net/user-media/addon_icons/329/329121-64.png?modified=1379222157" alt="image description" width="20" height="20" /></span>
    <span class="coefficient">11.5</span>
    </span>
  </label>
</div>

edited Jul 11, 2016 at 10:04

answered Jul 5, 2016 at 9:33

Elfayer

4,57010 gold badges50 silver badges78 bronze badges

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

2 Comments

Bogdan Tushevskyi Over a year ago

is it possible to use this code for '.this' coefficient? because i have the pair of radio

Elfayer Over a year ago

I updated my answer. Hopefully this helps, tell me if there is anything else that bother you. Sorry for the delay.

Varit J Patel · Accepted Answer · 2016-07-05 09:30:10Z

0

In here, I am passing value of coefficient using controller/ directive and I can pass multiple value using an object/array. and on click of radio button I am passing respective value. currently passing coefficient only.

$scope.coefficient = 12; // Pass this value to HTML 

$scope.getCoeff = function(coefficient){
    var coefficient = coefficient;
    console.log(coefficient);
}


<label class="bet-team-box" for="radio-1">
<input class="bet-main-input" id="radio-1" name="group1" type="radio" ng-click="getCoeff('coefficient')">
<span class="fake-label">
    <span class="team">Midnight Sun Esports</span>
    <span class="img-box"><img src="images/logo-team-04.png" alt="image description" width="20" height="20" /></span>
    <span class="coefficient" ng-bind="coefficient"></span>
</span>
</label>

This will work :)

Cheers!

answered Jul 5, 2016 at 9:30

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

3 Comments

Bogdan Tushevskyi Over a year ago

the problem is '.coefficient' value generate from the server, i can't set value

Varit J Patel Over a year ago

Is it coming from some REST api?

Bogdan Tushevskyi Over a year ago

this will work only for first '. coefficient', but i have a bunches of it, i need use 'this' on click

brk · Accepted Answer · 2016-07-05 09:31:49Z

0

You can pass it as a parameter to the function

<input class="bet-main-input" id="radio-1" 
    name="group1" type="radio" ng-click="getCoeff($event,12.43)">

JSFIDDLE

answered Jul 5, 2016 at 9:31

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

Bogdan Tushevskyi Over a year ago

the same problem, i can't set '. coefficient' value

gianni · Accepted Answer · 2016-07-05 09:36:23Z

0

Ok, writing a new answer because of the code. if you use a directive, you can find all your .coefficient elements in this way:

.directive('myDirective', function() {
return {
    restrict: 'E',      
    link: function($scope, element, attrs) {
        var coefficient = element.find('.coefficient'); 
        // Do your calculation here
        //-------------                 
    }
};

})

answered Jul 5, 2016 at 9:36

gianni

1,3672 gold badges17 silver badges30 bronze badges

Collectives™ on Stack Overflow

get value of element using angularjs

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related