Using Angular, how can I show a DOM element only if its ID matches a scope variable?

Question

I am relatively new to AngularJS.

I have a series of DIVs in a partial view. Each of the DIVs has a unique ID. I want to show / hide these DIVs based on a scope value (that matches one of the unique ID).

I can successfully write out the scope value in the view using something like {{showdivwithid}}

What would be the cleanest way to hide all the sibling divs that dont have an ID of {{showdivwithid}}

Answer 1

I think you are approaching the problem with a jQuery mindset.

Easiest solution is to not use the id of each div and use ngIf.

<div ng-if="showdivwithid==='firstDiv'">content here</div>
<div ng-if="showdivwithid==='secondDiv'">content here</div>
<div ng-if="showdivwithid==='thirdDiv'">content here</div>

If you don't mind the other elements to appear in the DOM, you can replace ng-if with ng-show.

Alternatively use a little directive like this:

app.directive("keepIfId", function(){
    return {
        restrict: 'A',
        transclude: true,
        scope: {},
        template: '<div ng-transclude></div>',
        link: function (scope, element, atts) {
            if(atts.id != atts.keepIfId){
                element.remove();
            }
        }
    };
});

HTML

<div id="el1" keep-if-id="{{showdivwithid}}">content here</div>
<div id="el2" keep-if-id="{{showdivwithid}}">content here</div>
<div id="el3" keep-if-id="{{showdivwithid}}">content here</div>

Answer 2

First, I want to echo @david004's answer, this is almost certainly not the correct way to solve an AngularJS problem. You can think of it this way: you are trying to make decisions on what to show based on something in the view (the id of an element), rather than the model, as Angular encourages as an MVC framework.

However, if you disagree and believe you have a legitimate use case for this functionality, then there is a way to do this that will work even if you change the id that you wish to view. The limitation with @david004's approach is that unless showdivwithid is set by the time the directive's link function runs, it won't work. And if the property on the scope changes later, the DOM will not update at all correctly.

So here is a similar but different directive approach that will give you conditional hiding of an element based on its id, and will update if the keep-if-id attribute value changes:

app.directive("keepIfId", function(){
    return {
        restrict: 'A',
        transclude: true,
        scope: {
          keepIfId: '@'
        },
        template: '<div ng-transclude ng-if="idMatches"></div>',
        link: function (scope, element, atts) {
            scope.idMatches = false;
            scope.$watch('keepIfId', function (id) {
              scope.idMatches = atts.id === id;
            });
        }
    };
});

Here is the Plunkr to see it in action.

Update: Why your directives aren't working

As mentioned in the comments on @david004's answer, you are definitely doing things in the wrong way (for AngularJS) by trying to create your article markup in blog.js using jQuery. You should instead be querying for the XML data in BlogController and populating a property on the scope with the results (in JSON/JS format) as an array. Then you use ng-repeat in your markup to repeat the markup for each item in the array.

However, if you must just "get it working", and with full knowledge that you are doing a hacky thing, and that the people who have to maintain your code may hate you for it, then know the following: AngularJS directives do not work until the markup is compiled (using the $compile service).

Compilation happens automatically for you if you use AngularJS the expected, correct way. For example, when using ng-view, after it loads the HTML for the view, it compiles it.

But since you are going "behind Angular's back" and adding DOM without telling it, it has no idea it needs to compile your new markup.

However, you can tell it to do so in your jQuery code (again, if you must).

First, get a reference to the $compile service from the AngularJS dependency injector, $injector:

var $compile = angular.element(document.body).injector().get('$compile');

Next, get the correct scope for the place in the DOM where you are adding these nodes:

var scope = angular.element('.blog-main').scope();

Finally, call $compile for each item, passing in the item markup and the scope:

var compiledNode = $compile(itm)(scope);

This gives you back a compiled node that you should be able to insert into the DOM correctly:

$('.blog-main').append(compiledNode);

Note: I am not 100% sure you can compile before inserting into the DOM like this.

So your final $.each() in blog.js should be something like:

var $compile = angular.element(document.body).injector().get('$compile'),
    scope = angular.element('.blog-main').scope();
$.each(items, function(idx, itm) {
      var compiledNode = $compile(itm)(scope);
      $('.blog-main').append(compiledNode); 
      compiledNode.readmore();
});