JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<div ng-app="app">
  <div ng-controller=mainCtrl ng-cloak>
    <div ng-repeat="x in array" ng-click="x.show = !x.show">
      <div ng-class="{'highlight' : x.flag}">
        <p>
          {{x.perAddress.city}}
          <br/> {{x.perAddress.Street}}
          <br/> {{x.perAddress.pin}}
        </p>
         <p ng-if="x.show && x.flag">
          {{x.alterAddress.city}}
          <br/> {{x.alterAddress.street}}
          <br/> {{x.alterAddress.pin}}
        </p>
      </div>
    </div>
  </div>
</div>

CSS

.highlight {
  background: yellow;
}

JavaScript

var app = angular.module('app', []);

 app.controller('mainCtrl', function($scope, $sce, $q, $http, $filter, $location) {
   $scope.test = 'test';
   $scope.array = [{
     "perAddress": {
       "city": "Delhi",
       "Street": "saket",
       "pin": "101011"
     },
     "flag": false
   }, {
     "perAddress": {
       "city": "Delhi",
       "Street": "malvya",
       "pin": "101011"
     },
     "flag": true,
     "alterAddress": {
       "city": "bangalore",
       "street": "velondore",
       "pin": "560103"
     }
   }]; 
 });