AngularJS: Hide or show object depending on key value of a json array

Question

I'm new in angular, and I have this 2 issues:
I received json data and I want to display different text in my view which depends on the key of my json.
Example: If the key is rcs, hello this is rcs will be displayed in my view or if the key is bank, hello this is my bank will be displayed in my view.

And the second issue: I want to display my object only if "visible" == "true".

So I tried to create an object which has the same key as my json data (screenshot) and have the value I want to display. After that I don't know how to manage this. And even less to display my object if the key "visible" == "true".

Right now, I only succeed to display the key of my json data.

And here is the view :

<ion-view view-title="Liste des mentions">
  <ion-content>
    <div class="item item-divider">
      <button class="ion-ios-minus-outline" type="button" name="button"></button>
      <button style="float:right;"class="ion-arrow-move"type="button" name="button" ng-click="moovelement()"></button>
    </div>
    <ul class="list" ng-repeat="(key,value) in mention">

        <li class="item" ng-style="displaymentions">{{key}}

        </li>

    </ul>
    <button class="ion-ios-plus-outline" type="button" name="button" ng-click="addmention()">Ajouter des mentions</button>

  </ion-content>
</ion-view>

and the controller :

.controller('MentionsCtrl',['$scope','$stateParams','$state','sendtoken',
 function($scope, $stateParams, $state,sendtoken) {



  sendtoken.send(sessionStorage.getItem('token'))
    .then(function(userdata){

      var mentionstva = userdata.data.mentions.vat.visible;
      sessionStorage.setItem('usermentionstva',mentionstva);

      var mentionsretard = userdata.data.mentions.delay.visible;
      sessionStorage.setItem('usermentionsretard',mentionsretard);


      var mentionsbank = userdata.data.mentions.bank.visible;
      sessionStorage.setItem('usermentionsbank',mentionsbank);

        console.log(mentionsbank);
      var mentionsperso = userdata.data.mentions.free.visible;
      sessionStorage.setItem('usermentionsperso',mentionsperso);


      var mentionscga = userdata.data.mentions.cga.visible;
      sessionStorage.setItem('usermentionscga',mentionscga);

      var mentionsrcs = userdata.data.mentions.rcs.visible;
      sessionStorage.setItem('usermentionsrcs',mentionsrcs);



      $scope.mention = userdata.data.mentions;



      if(userdata.data.mentions.visible == "false"){


        $scope.displaymentions = {"display": "none"};
      }
    console.log($scope.mention);


    });

     $scope.jsontab = {
         "bank": "Coordonnées bancaires",
         "vat": "TVA non applicable",
         "delay": "Retard de paiement",
         "rcs": "Immatriculation RCS",
         "cga": "Centre de gestion agrée",
         "free": "Mention personnelle"
     };



  $scope.retard = function(){
      $state.go('app.retard');
  };
  $scope.immatriculation = function(){
      $state.go('app.immatrcs');
  };
  $scope.addmention = function(){
    $state.go('app.addmentions');
  };



}])

ng-show="visible" docs.angularjs.org/api/ng/directive/ngShow — Max Sorin
– Max Sorin, Commented Mar 15, 2016 at 13:51

kugyousha · Accepted Answer · 2016-03-15 14:26:58Z

1

You already have an answer but this one I feel is a bit simpler and conforms to the json you already have without requiring you to define anything new in your controller.

<ul class="list" ng-repeat="(key,value) in mention" ng-if="mention[key].visible">
     <li class="item" ng-style="displaymentions">Hello this is my {{key}}</li>
</ul>

answered Mar 15, 2016 at 14:26

kugyousha

2,7183 gold badges22 silver badges24 bronze badges

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

2 Comments

xenurs Over a year ago

If i want to display something like "hey" when when the key == mention.rcs and "good evening" when the key == mention.bank how can i manage that ?

kugyousha Over a year ago

If you only have those two cases then and a series of ng-if statements would work but the way I would do it is by adding a message attribute to your json for each section. Then you wont even need the key,value. If you can't modify the incoming json, you can run a for loop over it in the controller to add the message attribute to each section dynamically. Does that make sense or do you need an example?

ojus kulkarni · Accepted Answer · 2016-03-15 14:06:23Z

1

Try this for your first issue :

<ul ng-repeat="mention in mentions"></ul>
  <li ng-if="mention === rcs"> Hello this is rcs </li>
  <li ng-if="mention === bank"> Hello this is Bank </li>
</ul>

For your second issue :
Add ng-if="visible===true" to your object

or in your controller you can set a $scope variable as default false and when you are calling your object, that time make it true
Then use it in ng-if for true condition.

answered Mar 15, 2016 at 14:06

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

AngularJS: Hide or show object depending on key value of a json array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related