0

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

Improve this question
4
  • can you wrap all your radios in a directive? Commented Jul 5, 2016 at 9:27
  • Can you make a fiddle with your code. Commented Jul 5, 2016 at 9:30
  • @gianni yes, no problem with it Commented Jul 5, 2016 at 9:30
  • @N123 done, if it can help Commented Jul 5, 2016 at 9:53

4 Answers 4

Reset to default
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>

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

2 Comments

is it possible to use this code for '.this' coefficient? because i have the pair of radio
I updated my answer. Hopefully this helps, tell me if there is anything else that bother you. Sorry for the delay.
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!

Improve this answer

3 Comments

the problem is '.coefficient' value generate from the server, i can't set value
Is it coming from some REST api?
this will work only for first '. coefficient', but i have a bunches of it, i need use 'this' on click
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

Improve this answer

1 Comment

the same problem, i can't set '. coefficient' value
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
        //-------------                 
    }
};

})

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.