Angular Show and hide JSON objects individually

Question

I am grabbing data from a JSON file, each object has it's on individual message. At the moment i am struggling to find a way show and hide messages separately. For example when i click on object i want to display credentials from that object only and not show credentials from the other objects.

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

app.controller('mainCtrl', function($scope) {
 $scope.colors = [  
 {  
    "color":"red",
    "value":"#f00",
    "message":"Simple message"
 },
 {  
    "color":"green",
    "value":"#0f0",
    "message":"Message with <strong>HTML</strong> tags"
 },
 {  
    "color":"blue",
    "value":"#00f",
    "message":"Am I going to work? I should not!"
 }
 ]

     $scope.popupBtn = function (message) {

$scope.currentMessage = message;

if (!($scope.popupBlock)) {
  $scope.popupBlock = true;
   }
    }


   });

HTML

<body ng-controller="mainCtrl">
  <ul class="block-elements">
<li ng-repeat="details in colors">
  <button ng-click="popupBtn(details.mesage)" ng-style="{ color: details.color }">Click Me</button>
</li>
 </ul>

  <div class="alert-block" ng-class="{'popup-container': popupBlock}">
  <div ng-repeat="text in colors">
    <a>{{text.message}}</a>
  </div>
</div>

</body>

Harish · Accepted Answer · 2016-07-04 11:47:03Z

1

It's better if you treat the data inside your view separate from the controller.

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

app.controller('mainCtrl', function($scope) {
 $scope.colors = [  
 {  
    "color":"red",
    "value":"#f00",
    "message":"Simple message"
 },
 {  
    "color":"green",
    "value":"#0f0",
    "message":"Message with <strong>HTML</strong> tags"
 },
 {  
    "color":"blue",
    "value":"#00f",
    "message":"Am I going to work? I should not!"
 }
 ]
 
   $scope.currentMessage = "";

   $scope.popupBtn = function (message) {

     // set current message
     $scope.currentMessage = message;

     // if popup is not open, open it
     if (!($scope.popupBlcok)){

       $scope.popupBlock = true;

     }
   }


 });

.alert-block {
  background-color: coral;
  color: white;
  display: none;
 }

.popup-container {
  display: block;
}

<body ng-app="app">
<div ng-controller="mainCtrl">
  <ul class="block-elements">
    <li ng-repeat="details in colors">
      <button ng-click="popupBtn(details.message)" ng-style="{ color: details.color }">Click Me</button>
    </li>
  </ul>

  <div class="alert-block" ng-class="{'popup-container': popupBlock}">
    <div>
      <a>{{currentMessage}}</a>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
 </div>
</body>

edited Jul 4, 2016 at 11:47

answered Jul 4, 2016 at 11:26

Harish

5282 gold badges11 silver badges21 bronze badges

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

3 Comments

NewBoy Over a year ago

button ng-click="popupBtn({{mesage}})" this give me an error message

Harish Over a year ago

oops! popupBtn(details.message) should do it. I will edit my answer.

NewBoy Over a year ago

I have got rid of the error messages however <a>{{currentMessage}}</a> isn't showing revealing any data. My ng-binding remains blank. Would you be able to provide an example in codepen

Itsik Mauyhas · Accepted Answer · 2016-07-04 11:19:12Z

0

You can use ng-show directive:

<a ng-show = "YOUR_CONDITION">{{text.message}}</a>

replace YOUR_CONDICTION with your condition, for example:

ng-show = "text.color == red"

Hopes that helps.

answered Jul 4, 2016 at 11:19

Itsik Mauyhas

4,01415 gold badges75 silver badges119 bronze badges

Comments

seanhodges · Accepted Answer · 2016-07-04 11:25:08Z

0

A simple solution would be to use an Angular accordion from the Angular UI components: http://angularui.github.io/bootstrap/

<uib-accordion close-others="oneAtATime">
  <div ng-repeat="text in colors">
    <uib-accordion-group heading="{{text.color}}" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      {{{text.message}}}
    </uib-accordion-group>
  </div>
</uib-accordion>

An example: http://plnkr.co/edit/ttdSZmEWJwwfBwuHTghG?p=preview

This will give you what you're looking for I think - to show only the "opened" message, and hiding the others.

Alternatively, you could roll your own directive that loops through the siblings and hides all the messages, then shows the selected message.

answered Jul 4, 2016 at 11:25

seanhodges

17.6k17 gold badges75 silver badges95 bronze badges

Collectives™ on Stack Overflow

Angular Show and hide JSON objects individually

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related