CODEWITHSUNDEEP
javascriptangularjs
StudioTime
StudioTime

Reputation: 23989

getAttribute value with AngularJS

I have the following controller... I'm trying to get the name and rating attibute from an HTML input, but I get the error TypeError: angular.element(...).getAttribute is not a function

app.controller('courseReview', function ($scope, $http) {

  $scope.rateThis = function rateThis(el){
    var elName = angular.element(el).getAttribute('name');
    var rating = angular.element(el).getAttribute('rating');
    document.getElementById(elName+'Rating').value = rating;
  }
});

HTML

<div ng-controller="courseReview">
  <!-- radio input -->
  <input class="star-5" id="wstar-5" rating="5" type="radio" name="welcome" ng-click="rateThis(this)"/>
</div>

Is there another way to do this?

Upvotes: 3

Views: 16990

Answers (1)

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

As per the documentation "https://docs.angularjs.org/api/ng/function/angular.element", to get attribute of an element you need to use

.attr('name');

in place of 

.getAttribute('name');

Important

You are passing this in your html, here this will not pass the DOM element to the function, rather it will refer to the scope. To pass the current element pass $event

HTML Change

ng-click="rateThis(this)" to ng-click="rateThis($event)"

JS Change

$scope.rateThis = function rateThis($event){
    var elName = angular.element($event.target).attr('name');
    var rating = angular.element($event.target).attr('rating');
    document.getElementById(elName+'Rating').value = rating;
}

For reference - http://plnkr.co/edit/ZQlEG33VvE72dOvqwnpy?p=preview

Upvotes: 16

Related Questions