AngularJS：根据json数组的键值隐藏或显示对象答案

【问题标题】：AngularJS: Hide or show object depending on key value of a json arrayAngularJS：根据json数组的键值隐藏或显示对象
【发布时间】：2016-03-15 13:46:46
【问题描述】：

我是 Angular 新手，我有这 2 个问题：
我收到了 json 数据，我想在我的视图中显示不同的文本，这取决于我的 json 的键。
示例：如果密钥为rcs，则hello this is rcs 将显示在我的视图中，或者如果密钥为bank，则hello this is my bank 将显示在我的视图中。

第二个问题：我只想在 "visible" == "true" 时显示我的对象。

所以我尝试创建一个与我的 json 数据（屏幕截图）具有相同键并具有我想要显示的值的对象。之后我不知道如何管理这个。如果键“可见”==“真”，则显示我的对象就更少了。

现在，我只成功显示了我的json数据的key。

这是视图：

<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>

和控制器：

.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

标签： angularjs json angularjs-ng-repeat

【解决方案1】：

您已经有了答案，但我觉得这个答案更简单一些，并且符合您已有的 json，无需您在控制器中定义任何新内容。

<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>

【讨论】：

如果我想在 key ==mention.rcs 时显示“嘿”之类的内容，而在 key ==mention.bank 时显示“晚安”之类的内容，我该如何管理？
如果您只有这两种情况，那么一系列 ng-if 语句将起作用，但我的做法是在每个部分的 json 中添加一个消息属性。然后你甚至不需要键，值。如果您无法修改传入的 json，您可以在控制器中对其运行 for 循环，以将消息属性动态添加到每个部分。这有意义还是你需要一个例子？

【解决方案2】：

在你的第一个问题上试试这个：

<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>

第二期：
将ng-if="visible===true" 添加到您的对象

或者在您的控制器中，您可以将$scope 变量设置为默认值false，当您调用对象时，将其设为true
然后在ng-if 中使用它以获得真实条件。

【讨论】：