0

I am having a data as below. There are 2 types of questions one which have pictures as answer and other which has options as answer.

$scope.data = [
     {'question': "Select one.", 'pic': false,
       'answer': [
              {"option": "8",      "correct": false},
              {"option": "14",     "correct": false},
              {"option": "1",      "correct": true},
              {"option": "23",     "correct": false} 
            ]

      },

       {'question': "Select another right answer.", 'pic': true,
       'answerPic': [
              {"option": "img/pic1.jpeg",      "correct": false},
              {"option": "img/pic2.jpeg",     "correct": false},
              {"option": "img/pic3.jpeg",      "correct": true},
              {"option": "img/pic6.jpeg",     "correct": false} 
            ]

      },

   ]

I have used the below code to present them in the view. As you can see there are two block of ng-repeat, one for each type. But how do I make angular choose a particular type looking the pic value in the data? For example if pic is true angular should use the block for picture. And otherwise the normal one. 

<div class="text">
  <label ng-repeat="a in question.answer">
      <input type="radio" name="answers"> 
      <div class="item-content">
            {{ a.option }}
      </div>
   </label>
</div>

<div class="picture">
  <label ng-repeat="a in question.answer">
      <input type="radio" name="answers"> 
      <div class="item-content">
            <img src="{{ a.option }}" />
      </div>
   </label>
</div>

As of now, the only option that I can think of is, using ng-show and ng-hide. Then I will be able to pass the pic value from data to it. But it looks like a hack to me. What would be the best way to solve this kind of a scenario?

esafwan
  • 17,311
  • 33
  • 107
  • 166
  • 1
    There's nothing wrong with `ng-show` or `ng-hide`. You can use it in conjunction with `ng-cloak`. See this question for more information about it: http://stackoverflow.com/questions/14068711/alternative-to-ng-show-hide-or-how-to-load-only-relevant-section-of-dom – friedi Oct 25 '14 at 14:56
  • Thanks, Friedi. I am curious why the negative vote. :/ Maybe I can avoid similar issues later, if I know. – esafwan Oct 25 '14 at 15:01
  • 1
    You're welcome. By the way the downvote is not from me. – friedi Oct 25 '14 at 15:03

1 Answers1

2

You can use ng-if or ng-switch. In contrast with ng-show/ng-hide, the former would actually remove the elements from the dom, whereas the latter just changes the display css property.

This page provides a good illustration.

New Dev
  • 48,427
  • 12
  • 87
  • 129