How to set the value of an attribute in Angular?

Question

In my directive I have this code:

// hide all drodowns with this attribute
$(document).find('[dropdown]').each(function (index) {

    if ($(this).is(':visible')) {
        var a =  $(this).attr('ng-show');
        ???
    }
});

At the place of the question marks I want to do the following: get the value of the ng-show attribute and set this value to false. The value I get from jQuery is for example this: showActionsDropdown. This value is a variable in my scope.

What I'd like to know is how I can change the value of showActionsDropdown to true.

First, your directives should really not scan the whole DOM. Directives should preferably operate only on their host element and/or their closest descendants/ancestors. Second, you are using jQuery to change the view value, in order to change the model value. I must say that's a weird approach to the problem. Your JS should operate on the models directly, and you should let the bidirectional binding take care of updating the view. So, in your case, your JS should locate and change the value of showActionsDropdown variable directly. You do not change ng-show attribute with jQuery. — Stewie
– Stewie, Commented Jun 14, 2013 at 10:39
@Stewie I don't completely get your point. I mean, how can I achieve the same thing with angular? — Martijn
– Martijn, Commented Jun 14, 2013 at 11:02

Martijn · Accepted Answer · 2013-06-14 07:58:30Z

3

I've found I was looking for. This is the way I accomplished it, using $parse:

$(document).find('[dropdown]').each(function (index) {

    if ($(this).is(':visible')) {
        var attrValue = $(this).attr('ng-show');

        var model = $parse(attrValue); // note: $parse is injected in the ctor
        model.assign(scope, false);
    }
});

answered Jun 14, 2013 at 7:58

Martijn

24.9k62 gold badges181 silver badges270 bronze badges

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

Comments

GautamD31 · Accepted Answer · 2013-06-14 07:20:02Z

0

Simple try like this

if ($(this).is(':visible')) {
     var a =  $(this).attr('ng-show');        
     $(this).attr('ng-show','false');        
}

assign value to ng-show directly like this,or you can directly do like

if ($(this).is(':visible')) {
     var a =  $(this).attr('ng-show');        
     $(this).hide();        
}

edited Jun 14, 2013 at 7:20

answered Jun 14, 2013 at 7:15

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

2 Comments

GautamD31 Over a year ago

you want to hide the Dropdown ..??

Martijn Over a year ago

The problem with this approach is that I need to click twice to see the dropdown again. This is because showActionsDropdown is set to true, which will show the dropdown. When I use .hide() the value is still true. So when I click the button again the value becomes false and won't show the dropdown. When I click again, the value becomes true, which will show the dropdown again, but I had to click twice and that's what I don't want

Collectives™ on Stack Overflow

How to set the value of an attribute in Angular?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related