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.

• Stewie: 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.
• Martijn: @Stewie I don't completely get your point. I mean, how can I achieve the same thing with angular?

Answer 1

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);
 }
});

Answer 2

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(); 
}

• GautamD31: you want to hide the Dropdown ..??
• Martijn: 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