VisaSpark
Sign in
intermediate18 min

Built-in Directives: ng-if, ng-repeat, ng-model

Reading the most common AngularJS directives you'll encounter in existing templates.

What you'll learn

  • Read and predict the effect of ng-if on whether an element renders
  • Read and predict the output of ng-repeat over a collection
  • Recognize ng-model as covered in an earlier lesson, in a fuller template context

Explanation

ng-if="expression" conditionally includes an element in the DOM entirely (not just hides it visually) based on whether the expression is truthy: <p ng-if="user.isAdmin">Admin panel</p> -- if user.isAdmin is falsy, this <p> doesn't exist in the DOM at all, not just visually hidden.

ng-repeat="item in items" renders a copy of its element once per item in a collection, similar in spirit to a modern framework's list-rendering directive (like Angular's @for, if you've taken that course): <li ng-repeat="task in tasks">{{task.title}}</li> renders one <li> per entry in tasks, with task bound to the current item inside each iteration.

Reading real legacy AngularJS templates, you'll typically see ng-model (from an earlier lesson), ng-if, and ng-repeat used together constantly -- a form bound with ng-model, inside a conditionally-shown section (ng-if), listing repeated items (ng-repeat) is an extremely common real-world pattern worth being able to read fluently.

Guided lab

Predict: ng-if and ng-repeat's combined effect

AngularJSNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

This models what ng-if and ng-repeat would render, as plain JS producing an array of rendered items (this platform doesn't render the real template). Predict the resulting list.

const tasks = [
  { title: "Buy milk", visible: true },
  { title: "Secret admin task", visible: false },
  { title: "Write report", visible: true },
];

// Models: <li ng-repeat="task in tasks" ng-if="task.visible">{{task.title}}</li>
const rendered = tasks.filter((task) => task.visible).map((task) => task.title);
console.log(rendered);

Stuck? Get a hint.

Common mistakes

  • Confusing ng-if (removes the element from the DOM entirely when false) with a CSS-based visibility toggle (which keeps the element in the DOM, just visually hidden) -- they have different performance and state-preservation implications.
  • Forgetting ng-repeat creates a new child scope for each iteration, which can cause confusing behavior if you're not aware of it when the loop body also uses two-way binding.
  • Misreading `item in items` order -- item is the per-iteration loop variable, items is the source collection, not the reverse.

Knowledge check

Knowledge check

1. What does ng-if="false" do to its element?
2. In `ng-repeat="task in tasks"`, what does `task` refer to?
3. Does ng-repeat create a new scope for each iteration?

Takeaway

ng-if removes elements from the DOM entirely (not just visually), and ng-repeat creates a new child scope per iteration -- both matter when reading or debugging existing templates.

Summary

ng-if conditionally includes/excludes elements from the DOM; ng-repeat renders one element per collection item, each with its own child scope.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Custom Directives →