Stop loop using ng-if condition in angularJS

Question

I have this code. $scope.counter = '1';

<div ng-repeat="cat in catadata">
   <div ng-if="cat.TopCategoryID = 2" >
      <div ng-if="counter = 1" >
         <div class="feedsDisplay" ng-init="counter = counter + 1">
            Creater Img:{{cat.CreatedBy_Profile.Picture.URI}}" 
         </div>
      </div>
   </div>
</div>

I want to stop loop when counter = 2, I want to display just 1 result.

ng-init="counter = counter + 1
{{counter}}

displaying 11111 it should display 12345

It's really not clear what you're trying to do. Do you really want to display only one element? And why are you doing equality checks with = instead of ==? — ryanyuyu
– ryanyuyu, Commented Sep 18, 2015 at 12:44
If you want to display only the result with index 1, just do this {{ catadata[0].CreatedBy_Profile.Picture.URI }} — Jahongir Rahmonov
– Jahongir Rahmonov, Commented Sep 18, 2015 at 12:46
can you provide working sample on jsfiddle or plunkr? and explain want you try to do? not it is unclear — Grundy
– Grundy, Commented Sep 18, 2015 at 12:52

Anik Islam Abhi · Accepted Answer · 2015-09-18 13:07:57Z

2

you are comparing with = instead of ==

Try like this

ng-if="counter == 1"

value of counter is string . add + sign before counter

try like this

ng-init="counter = +counter + 1"

edited Sep 18, 2015 at 13:07

answered Sep 18, 2015 at 12:46

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Muhammad Riaz Over a year ago

ng-init="counter = counter + 1 {{counter}} displaying 11111 it should display 12345

Grundy Over a year ago

@MuhammadRiaz, first counter value is string so when you do + in just add simbol to string

Anik Islam Abhi Over a year ago

like this counter = +counter + 1

intekhab · Accepted Answer · 2015-09-18 13:10:56Z

2

You cant stop ng-repeat conditionally. To print only one result you can use

<div ng-repeat="cat in catadata | limitTo : 1">

OR

<div>{{catadata[0]}}</div>

edited Sep 18, 2015 at 13:10

answered Sep 18, 2015 at 12:49

intekhab

1,6162 gold badges15 silver badges19 bronze badges

3 Comments

Muhammad Riaz Over a year ago

I want limit within ng-if condition <div ng-if="cat.TopCategoryID = 2" >

Grundy Over a year ago

@MuhammadRiaz so add filter like cat in catadata | filter: {TopCategoryID : 2}

intekhab Over a year ago

@Riaz do it as <div ng-if="cat.TopCategoryID == 2" >. But remember ng-repeat will run for all elements of array. ng-if will only prevent the element to be created.

Dzinx · Accepted Answer · 2015-09-18 12:55:42Z

1

Rather than misusing ng-repeat, ng-init and ng-if like this, just try to extract the first matching cat before you render it, e.g. in a controller, directive or service:

for (var i = 0, maxI = catadata.length; i < maxI; ++i) {
    if (cat.TopCategoryID === 2) {
        $scope.firstMatchingCat = cat;
        break;
    }
}

And then in the template:

<div class="feedsDisplay">
    Creater Img:{{firstMatchingCat.CreatedBy_Profile.Picture.URI}}" 
</div>

answered Sep 18, 2015 at 12:55

Dzinx

58.2k10 gold badges63 silver badges78 bronze badges

Collectives™ on Stack Overflow

Stop loop using ng-if condition in angularJS

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related