使用angularjs獲取元素的值

Question

我如何使用角度獲得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

我將使用jqLit​​e並通過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

在這里，我使用控制器/指令傳遞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
        //-------------                 
    }
};

}）