70566

Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]

<div class="question-status question-originals-of-duplicate">

This question already has an answer here:

    <li> How to use ng-if with ng-repeat? <span class="question-originals-answer-count"> 5 answers </span> </li> </ul>

    I have a simple ng-repeat that displays only half of the items. For some reason, i got it to work with ng-show but not with ng-if. I don't understand why?

    this works:

    <li ng-repeat="item in items" ng-show="$index < items.length / 2">{{item}}</li>

    this doesn't:

    <li ng-repeat="item in items" ng-if="$index < items.length / 2">{{item}}</li>

    here is a jsfiddle to demonstrate: http://jsfiddle.net/HB7LU/17269/

    This question: AngularJS: ng-if not working in combination with ng-click? does not provide an answer why ng-show works while ng-if doesn't

    Answer1:

    I'm guessing this is because of the Angular's priority rendering cycle. They might've changed its behavior with newer versions as someone posted above. In case like yours I usually make a custom filter for ngRepeat to slice the array and show only specified number of items based on the offset (ngRepeat pagination). I've never messed up with using ngRepeat directly with ngIf or ngShow/Hide as it can get really bugged whichever way you turn it.

      <li>ngRepeat directive creates and appends new node elements.</li> <li>ngShow will allow angular to generate an element, but after that it will set it's display to none.</li> <li>ngIf won't allow angular to generate an element.</li> </ul>

      As far as I know, ngIf has higher priority than ngRepeat, so I can assume that what's happening below the field is:

        <li>Angular sees the array.</li> <li>ngIf doesn't know what $index (as it's part of ngRepeat) is so its cycle just runs by.</li> <li>ngRepeat renders elements.</li> </ul>

        whilst ngShow works:

          <li>Angular sees the array.</li> <li>ngRepeat renders elements.</li> <li>ngShow shows them by specified condition.</li> </ul>

Recommend

  • Infinite Digest Error when Passing new objects to angular bindings
  • Regex: how to get \\b to work with utf-8 charset?
  • Scope inheritance for angular directives
  • Add to stack from ArrayList (Java)
  • Using publish-composite with Angular-Meteor
  • angular Scroll div on button click
  • Getting webGL error in autodesk viewer
  • Intellij Idea Terminal shortcut not working
  • How to re-render views using Angular JS
  • How read between delimiters in php DOM of a XML file?
  • Jquery resizable reposition handle after scroll
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • how to populate a SQLite database and use that database in phonegap?
  • Xmonad multiple submap key combos
  • cell spacing in div table
  • Why are YouTube videos using 'youtube.com/v' not loading
  • VBA Excel, loop through variables
  • In-place sed command not working
  • How to set elevation color?
  • Why cepheus don't send int without quotes to orion?
  • How to make jdk.nashorn.api.scripting.JSObject visible in plugin [duplicate]
  • Jackson Parser: ignore deserializing for type mismatch
  • How to clear text inside text field when radio button is select
  • NHibernate Validation Localization with S#arp Architecture
  • Spring Data JPA custom method causing PropertyReferenceException
  • Excel - Autoshape get it's name from cell (value)
  • Cross-Platform Protobuf Serialization
  • Validaiting emails with Net.Mail MailAddress
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • jquery mobile loadPage not working
  • Do I've to free mysql result after storing it?
  • Data Validation Drop Down Box Arrow Disappearing
  • Matrix multiplication with MKL
  • How to get icons for entities from eclipse?
  • Hits per day in Google Big Query
  • How do you join a server to an Active Directory (domain)?
  • File not found error Google Drive API
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy
  • Converting MP3 duration time