6

I am trying to use ng-if in ng-repeat for implementing Accordions. Based upon the condition value, the ng-repeat should skip some items in ng-repeat.

E.g. If the item.condition is true then only it should display accordion. The code below is what I have so far and it is not working. Does it look right? 

     <accordion close-others="true">
          <accordion-group is-open="isopen" ng-repeat="item in items | limitTo:2" ng-if="item.condition == "true"",ng-init="isopen=2">
                  <accordion-heading>
          {{item.label}}
            <i class="pull-right glyphicon"
                         ng-class="{'icon-arrow-up': isopen, 'icon-arrow-down': !isopen}"></i>
                  </accordion-heading>
              </accordion-group>
          </accordion>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
mahi244
  • 97
  • 3
  • 10
  • Did you try and is it not working? What's the output...any error? – Nirmal Jun 26 '15 at 20:57
  • the error was because of "true" in ng-if="item.condition == "true"". I should be only true. Thanks :-) – mahi244 Jun 26 '15 at 21:07
  • 6
    @user3320018 No! No! No! If it's not working, it's off-topic for Code Review! – Mast Jun 26 '15 at 21:12
  • For here a valid question also means correct syntax....such problems are covered by editors. The OP should be made aware about that instead...a simple editor will flag such errors. – Nirmal Jun 26 '15 at 21:15
  • 2
    @user3320018 I don't think you get it. Codereview is for working code only. The user mentions this in his post: *"The code below is what I have so far and it is not working."*. Codereview is for ***working code only***. Broken code is off-topic there. – Ethan Bierlein Jun 26 '15 at 21:17
  • 1
    @user3320018 Being a regular on Codereview, I know this. If you need/want to know what is on, and off-topic there, you can read through the [on/off-topic page](http://codereview.stackexchange.com/help/on-topic). – Ethan Bierlein Jun 26 '15 at 21:18
  • 2
    @user3320018 Regardless of being off-topic here or not, it's not [on-topic](http://codereview.stackexchange.com/help/on-topic) on Code Review. Don't refer broken code to CR, ever. – Mast Jun 26 '15 at 21:20
  • 1
    TLDRing it, only code that works as expected is for code review. Broken code comes here. Working, but ugly, code goes to CR. – Dan Jun 26 '15 at 21:27
  • Agree not for code review but not for here either...the OP's code has **syntax error** and that's my point. – Nirmal Jun 26 '15 at 21:33
  • 1
    @user3320018 If it has a syntax error, then it's perfectly on-topic for Stackoverflow. – Ethan Bierlein Jun 26 '15 at 21:34
  • 1
    @EthanBierlein One of the close flags states: `This question was caused by a problem that can no longer be reproduced or a simple typographical error.` Syntax errors are usually typographical errors. – Mast Jun 26 '15 at 21:35
  • Well we also discourage code dump...especially with problems like this which shows lack of effort by OP. What does "perfect" mean? – Nirmal Jun 26 '15 at 21:38
  • @EthanBierlein - did you spot the syntax error in the code part of the question? `` I didn't mean code review...I was trying to make a point about quality of question for here. Did you read the question completely the first time...along with the code? It has syntax error with `" , ` and besides the user `pankajparker` who answered this post noticed and has mentioned about that. – Nirmal Jun 26 '15 at 22:52

1 Answers1

5

Your ng-if contain double extra quotes, It should be ng-if="item.condition == true", Also remove the , from the accordion element

Also you could minimize your condition to ng-if="item.condition" so then expression will return true and false on item.condition variable evaluation.

Markup

<accordion close-others="true">
    <accordion-group is-open="isopen" ng-repeat="item in items | limitTo:2" 
       ng-if="item.condition" ng-init="isopen=2">
        <accordion-heading>
            {{item.label}}
            <i class="pull-right glyphicon" ng-class="{'icon-arrow-up': isopen, 'icon-arrow-down': !isopen}"></i>
        </accordion-heading>
    </accordion-group>
</accordion>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • 2
    Got it, it was because of extra "" in ng-if="item.amenity =="false"". Thanks :-) – mahi244 Jun 26 '15 at 21:05
  • I have one question, Instead of hard coded value for true of false in ng-if. I just want to pass variable that contains true of false eg: check = "true or false". ng-if "item.condition == check". It is not working this way , is there any way ? – mahi244 Jun 26 '15 at 21:14
  • sure..`ng-if` needs only expression which should return true or false on evaluation of it.take a look at mine updated answer... – Pankaj Parkar Jun 26 '15 at 21:16
  • 1
    Thanks. But I my case i am using the above code as a directive. So, for some conditions ng-if = "item.condition == false" and ng-if="item.condition==true". So , i trying to the pass the false and true at run-time and make it work. Is there a way that i can pass variable for false or true. – mahi244 Jun 26 '15 at 21:34
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/81684/discussion-between-mahesh-and-pankajparkar). – mahi244 Jun 26 '15 at 21:45