Evaluating expression inside angular directive

Question

I want my table to conditionally render its row based on whether the value is null or not. The rows have different custom entries and labels, that's why I can't just use ng-repeat. Here's the code:

<table>
    <thead>
    </thead>
    <tbody>
        <tr ng-show = "{{data.entry_1}} !== null">
            <td>Custom Label 1</td>
            <td>{{data.entry_1}}</td>
        </tr>
        <tr ng-show = "{{data.entry_2}} !== null">
            <td>Custom Label 2</td>
            <td>{{data.entry_2}}</td>
        </tr>
        .
        .
        .
        <tr ng-show = "{{data.entry_n}} !== null">
            <td>Custom Label n</td>
            <td>{{data.entry_n}}</td>
        </tr>
    </tbody>
</table>

However, it seems that this way is not right. It's either javascript (compiler) is complaining at {{}} in the ng-show or at '!== null' or maybe both. How to evaluate an angular expression (in {{}}) inside an ng- directive?

I know that I could also evaluate this instead in the js file, but since I don't want to add further scope variables (to make my code cleaner), I chose to evaluate if it is null in the ng-show directive. Could someone tell me how to do it?

Thanks.

You are using the expression language in a wrong way, null condition should be inside the expression, i.e. {{data.entry_2 !== null}} Btw you can still use ng-repeat in tr and render the row conditionally if the custom entities have an index as given in your example. For example {{data['entry_' + ($index + 1)] !== null}} can make your code concise. But of course if the attributes have random names this approach won't work. — cubbuk
– cubbuk, Commented Oct 16, 2014 at 12:34
there is no need for {{}} in ng-show, you can do this with a function. e.g ng-show='calculate(0)' returning true or false. Think about reusable code so you don't need to repeat !== null every time and you can easily change the null to false for example if your scenario changes — Stefanos Chrs
– Stefanos Chrs, Commented Oct 16, 2014 at 12:44
@cubbuk It's wierd. When I use ng-show = "false", chrome dev tools show another attribute display: none. If it's just <tr ng-show="{{data.entry_i !== null}}"> still evaluates to true and display: none is gone, eventhough entry_i is not assigned any value in js file (the variable actually should not exist). — oikonomiyaki
– oikonomiyaki, Commented Oct 16, 2014 at 13:02

Martin · Accepted Answer · 2014-10-16 13:43:00Z

1

You were close. The curly braces are only needed to echo/print/render the value of the variable. In an expression you should never use the curly braces.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app ng-init="data = {entry_1: 'notnull', entry_2: null, entry_n: 'againNotNull'}">
    <thead>
    </thead>
    <tbody>
        <tr ng-show="data.entry_1">
            <td>Custom Label 1</td>
            <td>{{data.entry_1}}</td>
        </tr>
        <tr ng-show="data.entry_2">
            <td>Custom Label 2</td>
            <td>{{data.entry_2}}</td>
        </tr>
        .
        .
        .
        <tr ng-show="data.entry_n">
            <td>Custom Label n</td>
            <td>{{data.entry_n}}</td>
        </tr>
        <tr ng-show="data.device">
            <td>Custom Device</td>
            <td>{{data.device}}</td>
        </tr>
    </tbody>
</table>

edited Oct 16, 2014 at 13:43

answered Oct 16, 2014 at 12:46

Martin

16.4k4 gold badges50 silver badges58 bronze badges

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

2 Comments

oikonomiyaki Over a year ago

Another question, if, let's say variable 'device', was never a value of data, because the javascript file did not assign or initialize such variable to data (i.e., device does not exist in data), is it sufficient to compare data.device !== null to get "truthiness" or "falseyness"?

Martin Over a year ago

I have updated my example include this question. I would recommend reading the documentation on Angular Expressions. You do not need to evaluate "data.device !== null". "data.device" is sufficient. NG Expressions are much more forgiving than JS. If the property is undefined, or a parent object is undefined, the expression will be evaluated to false.

skewl84 · Accepted Answer · 2014-10-16 12:54:39Z

-2

Use $compile service in the context of the scope inside your directive.

See https://docs.angularjs.org/api/ng/service/$compile

Edit: I agree with Martin's answer.

edited Oct 16, 2014 at 12:54

answered Oct 16, 2014 at 12:33

skewl84

1842 silver badges9 bronze badges

2 Comments

Vojtiik Over a year ago

I think this is a little overkill given the problem. In case of dynamically loaded DOM, maybe.

Martin Over a year ago

Creating a directive to evaluate an expression is counterproductive. The ngShow directive is sufficient.

Collectives™ on Stack Overflow

Evaluating expression inside angular directive

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related