Menu
I'm having trouble trying to use an if alongside a repeat statement.
I'm fetching data, as follows:
modules: Array[1]
0: Object
embed: "<iframe width="600" height="338" src="https://www.youtube.com/embed/UqdDAn4_iY0"
frameborder="0" allowfullscreen="" style="margin:0px auto;display:block;"></iframe>"
type: "embed"
1: Object
src: "https://m1.behance.net/rendition/modules/127899607/disp/072cebf2137c78359d66922ef9b96adb.jpg"
type: "image"
So, if the module has a type of image, i want to get the image. If it has type embed, i want to get the iframe. My current view code is:
<div ng-repeat="project in project.modules" ng-if="project.type == 'image'">
<img src="{{ project.src }}" class="img-responsive img-centered" alt="{{ project.name }}"/>
</div>
It works well if i take out ng-if. Console outputs the following error:
Error: Multiple directives [ngRepeat, ngIf] asking for transclusion on: <!-- ngRepeat: project in project.modules -->
571
Stay on the bleeding edge of your favorite technologies. $index is a way to show which iteration of a loop you're in. If we set up an ng-repeat to repeat over the letters in 'somewords', like so: <div ng-app="app"> <div ng-repeat="item in 'somewords'.split('')"> {{$index + 1}}.
You can add condition using ng-if also and this is effective too. You can apply any condition to your list using ng-if attribute. In below example, I have put condition where Age > 20 and IsActive is true. ng-repeat will fetch all records which full fill this scenario.
Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
AngularJS provides you ng-if, ng-switch directives to display HTML elements based on conditions or cases. ng-repeat directive is used to generate HTML from a collection of items.
The ng-repeat directive helps us display a list of items defined in the controller to a view page. Let’s look an example of ng-repeat directive in AngularJS:
In AngularJS framework, it is very important to know that all the In-Built directive which have been provisioned by AngularJS framework will always be denoted with ng prefix. The expression defined in ng-if directive evaluates to a Boolean value i.e. True or False and based on this value the element is displayed on HTML DOM.
Angular provides a directive called "ng-repeat" which can be used to display repeating values defined in our controller. Let's look at an example of how we can achieve this.
You can use filter instead of using ngIf. Your code shall be like:
<div ng-repeat="project in project.modules | filter: { type: 'image' }">
And it shall work.
The solution you're trying to do in your code can't be done as ngIf and ngRepeat both trying to remove and replace some elements and do some transclusion.
Check this issue https://github.com/angular/angular.js/issues/4398
Also check the usage of filters https://docs.angularjs.org/tutorial/step_09
and this question shall be useful with using ngRepeat with filters ng-repeat :filter by single field
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
