How to change attribute of html in angular js?

Question

I want to change attribute of a div in angularjs. I know how to do in jquery but not in angular.

html :

<div ng-app="test">
    <div ng-controller="cont">
        <button ng-click="updateStatus()">TOGGLE ATTRIBUTE </button>
        <div id="test" {{status}}>TEXT </div>
    </div>    
</div>

js :

var angApp = angular.module('test',[]);
angApp.controller('cont', ['$scope', function($scope){
    $scope.status = 'someattr';
    $scope.updateStatus = function() {
        if( $scope.status == 'someattr'){
          $scope.status = '';
        }else{
            $scope.status = 'someattr';
        } 
    };
}])

Here is jsfiddle to work with.

In jquery :

 var div = $('#test');
 $('button').on('click',function(){
   if( div.attr('someattr'){
      div.removeAttr('someattr');
   }else{
      div.attr('someattr',true); 
   }
})

I want to achive same in angularjs.

NOTE : I AM NOT TRYING TO ADD DISABLED STATE TO DIV. I JUST WANT TO TOGGLE AN ATTRIBUTE.

If you just want to style something differently, you'd normally use ng-class. It just takes an expression that if true adds the class you want and if false removes it. jsfiddle.net/5h195302/19 — jme11
– jme11, Commented May 7, 2015 at 11:13

BeNdErR · Accepted Answer · 2015-05-07 11:38:11Z

4

In your specific case (add disabled attribute), you have to use ng-disabled in order to bind its value to a $scope variable.

It makes no sense to use it on a div, I'll use a button instead to give you an example:

<button ng-click="updateStatus()">TOGGLE ATTRIBUTE </button>
<button id="test" ng-disabled='status'>TEXT</button>

see a working example HERE

UPDATE

To toggle an attribute, yo can use attr() and removeAttr():

el.attr("disabled", "true");
el.removeAttr("disabled");

See a complete example HERE

NOTE (thanks to jme11): as reported on Angular Dev Guide

Do not use controllers to: Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.

you should avoid to manipulate the DOM inside the controller.

edited May 7, 2015 at 11:38

answered May 7, 2015 at 10:30

BeNdErR

18k21 gold badges79 silver badges106 bronze badges

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

4 Comments

Gautam Kumar Over a year ago

I want to add and remove attr when clicked on button.

Gautam Kumar Over a year ago

how to implement, please give example.

BeNdErR Over a year ago

Have you clicked on the second link?

jme11 Over a year ago

While this works, it's not really the right thing to do. You shouldn't be manipulating the DOM in the controller. docs.angularjs.org/guide/controller. (Note the part that reads: Do not use controllers to: Manipulate DOM). The correct way to do this is to modify your CSS and use something like ng-class.

Jussi Kosunen · Accepted Answer · 2015-05-07 11:53:22Z

1

Make a directive which uses .attr and .removeAttr in a $watch handler. Here's a modified version of your fiddle: http://jsfiddle.net/0eqz1qo1/1/

The directive:

.directive('addAttr', function() {
    return function(scope, elem, attr) {
        scope.$watch(attr.addAttr, function(val, prev) {
            if(val)
                elem.attr(val, "");
            if(prev && prev !== val)
                elem.removeAttr(prev);
        });
    }
})

Usage:

$scope.myVar = 'hello';
...
<div add-attr="myVar"></div>

becomes:

<div add-attr="myVar" hello></div>

answered May 7, 2015 at 11:53

Jussi Kosunen

8,2973 gold badges30 silver badges34 bronze badges

Comments

satya · Accepted Answer · 2015-05-07 10:47:49Z

0

You can not implement disable property for any div.But you can hide or show the div using Angular.js.Check the code below.

<div ng-app="test">
    <div ng-controller="cont">
        <button ng-click="updateStatus()">TOGGLE ATTRIBUTE </button>
        <div id="test" ng-hide="hide-div" >TEXT </div>
    </div>    
</div>

JS:

var angApp = angular.module('test',[]);
angApp.controller('cont', ['$scope', function($scope){
    $scope.hide-div = true;
    $scope.updateStatus = function() {
        if( $scope.hide-div == true){
          //do something here
        }else{
            $scope.hide-div = true;
        } 
    };
}])

Other option is you can also use ng-class in div and inside those class you can declare display:none,display:block

answered May 7, 2015 at 10:47

satya

3,58011 gold badges59 silver badges135 bronze badges

4 Comments

Gautam Kumar Over a year ago

I am trying to remove or add an attribute.

satya Over a year ago

@ Gautam :Which type of attribute you want to add/remove.

Gautam Kumar Over a year ago

some custom attribute.

satya Over a year ago

@ Gautam : you can use ' ng-attr-id="{{something}}" ' inside the div and pass some value to it (i.e-$scope.something="value").

Radonirina Maminiaina · Accepted Answer · 2015-05-07 11:06:14Z

0

You can't add an attribute by this way with angularJS. If you inspect your code, you can see that the attribute that you're trying to pass in div is {{status}}(your expression), use existing attributes rather than create your own! For example: ng-disabled, ng-show, ng-hide.

answered May 7, 2015 at 11:06

Radonirina Maminiaina

7,0144 gold badges35 silver badges63 bronze badges

Comments

Rajiv · Accepted Answer · 2015-05-07 11:39:23Z

0

It's not really right thing to do. I guess, cannot inject attribute with angularJS. {{status}} is an expression, it's like expression and will evaluate by angularjs while rendering to html. about expression: https://docs.angularjs.org/guide/expression

answered May 7, 2015 at 11:39

Rajiv

711 silver badge2 bronze badges

Comments

Ritesh Dhuri · Accepted Answer · 2015-05-07 12:54:26Z

0

Replace your line :

<div id="test" {{status}}>TEXT </div>

with these :

<div id="test" someattr="" ng-if="status=='someattr'" >TEXT</div>
<div id="test" ng-if="status==''" >TEXT</div>

edited May 7, 2015 at 12:54

answered May 7, 2015 at 11:21

Ritesh Dhuri

2152 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to change attribute of html in angular js?

6 Answers 6

4 Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related