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.

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.

• javascript
• html
• angularjs

• ng-click="updateStatus()" (see the parantheses) – devqon Commented May 7, 2015 at 10:28
• 3 How can a div have disabled? What are you tryin to do? – Zee Commented May 7, 2015 at 10:28
• Please see updated jsfiddle jsfiddle/5h195302/7 – Paul Fitzgerald Commented May 7, 2015 at 10:29
• I want to change attribute not html. – Gautam Kumar Commented May 7, 2015 at 10:30
• 1 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/5h195302/19 – jme11 Commented May 7, 2015 at 11:13

6 Answers 6

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 plete 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.

Make a directive which uses .attr and .removeAttr in a $watch handler. Here's a modified version of your fiddle: http://jsfiddle/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>

bees:

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

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

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.

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/guide/expression

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>