Question

如何使用angular获取this .coefficient值？我尝试使用ng-click下面的代码，但我只能获得第一个.coefficient值的整个html（我有一大堆无线电就像这样）。我可以用jquery解决这个问题，但我需要将.coefficient值乘以动态添加输入。

$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 1

我使用jqLite并通过angular.element(coefficient).text()访问该值：

如果您更喜欢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>

Answer 2

在这里，我使用controller / directive传递coefficient的值，我可以使用对象/数组传递多个值。然后点击单选按钮我传递相应的值。目前仅通过系数。

$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>

这将有效:)

干杯！

Answer 3

您可以将其作为参数传递给函数

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

JSFIDDLE

Answer 4

好的，因为代码而写了一个新的答案。如果您使用指令，您可以通过这种方式找到所有.coefficient元素：

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

}）

使用angularjs获取元素的值

4 个答案: