Bogdan Tushevskyi Bogdan Tushevskyi - 4 months ago 18
jQuery Question

get value of element using angularjs

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

Answer

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>