CODEWITHSUNDEEP
angularjs-ng-repeat
tt0206
tt0206

Reputation: 837

Display data with an AngularJS ng-repeat, in a div, side by side

I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.

My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.

Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:

enter link description here

I want to see a result like this:

enter image description here

Upvotes: 0

Views: 1037

Answers (1)

Divya Jain
Divya Jain

Reputation: 393

You can write your ng-repeat like below. Whenever it get isActive true, it will create the div section for this.

<body ng-controller="MainCtrl">
    <div ng-repeat="tempData in data">
      <div ng-if="tempData.isActive == true" >
        <div class="col-xs-12" >
            <div class="col-xs-4">Plan Type:</div>
            <div class="col-xs-8">{{tempData.plantype}}</div>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-4">Term:</div>
            <div class="col-xs-8">{{tempData.term}}</div>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-4">Rate:</div> 
            <div class="col-xs-8">{{tempData.rate}}</div>
        </div>
      </div>

    </div>

  </body>

Upvotes: 1

Related Questions