CODEWITHSUNDEEP
angularjsangularjs-ng-showangularjs-ng-if
Citrael
Citrael

Reputation: 562

Why angularjs ignore ng-if?

i try use ng-if, but angular no compile him. Look in test code:

<ul class="tmmenu-admin-tabs-builder-panel-answer">
                        <li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="answer in answers">
                            <div>
                                <span ng-repeat="question in questions">
                                    <label ng-repeat="answer in question.answers">
                                        <input type="checkbox">{{question.id}}.{{answer.id+1}}
                                        <span ng-if="test()">ddd</span>
                                    </label>
                                </span>
                            </div>
                            <textarea>{{answer.text}}</textarea>
                        </li>
                    </ul>

and function test:

$scope.test = function(){
        console.log('d');
        return false;
    }

if run this page, we can see "ddd" in "Li" despite to test return false.

Next step, i replaced at "ng-if" "ng-show" :

<ul class="tmmenu-admin-tabs-builder-panel-answer">
    ...
    <span ng-show="test()">ddd</span>
    ...
</ul>

And its working, "ddd" hide. Why ng-if not working where working ng-show?

Upvotes: 1

Views: 1261

Answers (2)

Jason Goemaat
Jason Goemaat

Reputation: 29234

Could be a scope problem, is there something in a child scope that might override the value for test? ng-if works fine for me (plunker). I assume that everything else is working fine, are you seeing 'd' in the console to show that your function is getting executed?

Try changing your tag to this to help debug and you should see that it is a function:

<span ng-if="test()">test is: {{test.toString()}}</span>

Upvotes: 0

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).

Upvotes: 1

Related Questions