The ng-if directive is not increasing the $index value within the ng-repeat loop

Question

The ng-if directive is not increasing the $index value within the ng-repeat loop

$index does not increment within the ng-if block.

<div ng-repeat="household in census.households track by $index">
    <div ng-if="household.ask_for_tobacco">
       <input id="tobacco_{{$index}}" type="checkbox" ng-model="member.smoker">
       <label for="tobacco_{{$index}}"></label>
     </div>
</div>

In the above block, I am using ng-repeat and ng-if inside it. I am following the condition ng-if and setting the element ID with $index. The element ID is always being set to 0, instead of incrementing to 1, 2, 3...

If the ng-if is removed, it works without any issues. Have you faced a similar problem? If so, please share the solution.

javascript angularjs

Answer 1

Answer №1

The issue at hand is that ng-if generates its own scope, which can cause interference with the scope of the iteration created by ng-repeat.

Since using ng-show is not feasible, I recommend applying a filter to your ng-repeat as shown below:

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="household in households | filter: { ask_for_tobacco: true }">
    <input id="tobacco_{{$index}}" type="checkbox">
    <label for="tobacco_{{$index}}">index {{ $index }} id = {{ household.id }}</label>
  </div>
</div>

Check out a live demo here: http://jsfiddle.net/m25afg12/9/

Answer 2

The issue at hand is that ng-if generates its own scope, which can cause interference with the scope of the iteration created by ng-repeat.

Since using ng-show is not feasible, I recommend applying a filter to your ng-repeat as shown below:

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="household in households | filter: { ask_for_tobacco: true }">
    <input id="tobacco_{{$index}}" type="checkbox">
    <label for="tobacco_{{$index}}">index {{ $index }} id = {{ household.id }}</label>
  </div>
</div>

Check out a live demo here: http://jsfiddle.net/m25afg12/9/

Answer 3

Answer №2

To access the parent index, simply use $parent.$index It may be a bit late for giving this answer though :D

Answer 4

To access the parent index, simply use $parent.$index It may be a bit late for giving this answer though :D

The ng-if directive is not increasing the $index value within the ng-repeat loop

Answer №1

Answer №2

Similar questions

Loop through XML nodes in Node.js

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

Exploring the capabilities of useRef in executing a function on a dynamically created element within a React/Remix/Prisma environment

Creating an interactive checkbox input field utilizing a JSON-driven database

The onChange event was not able to be activated within the material-ui radioGroup component

Automatically select the option from the drop-down menu

What is the best way to assign a unique background color to each individual card in my card list?

When attempting to launch the Ember Cordova application on the mobile device, an error was encountered stating: "Unable to access property 'notification' as it is

Ajax User is currently composing a message in the chat

Purge ajax result upon completion of server operation

Modifying the appearance of a CSS element with jQuery: Step-by-step guide

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

Not entirely certain about how to execute this concept using AJAX

IntelliJ is not able to detect certain JS libraries

Toggle the tooltip to reveal a hidden div by clicking, and then click again to close it

Implement a method to duplicate and eliminate elements in a fast and effective manner

Adding up the array of values that have been increased

Using radio buttons and a price slider, a unique jQuery filter for products can be

Is it possible to utilize Angular's dependency injection in place of RequireJS?

Is there a way to configure multiple entry points in a package.json file?