Javascript 角度分别显示和隐藏JSON对象

我从一个JSON文件中获取数据，每个对象都有一条单独的消息。目前，我正在努力寻找一种方法，分别显示和隐藏信息。例如，当我单击对象时，我希望仅显示来自该对象的凭据，而不显示来自其他对象的凭据

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


   });

var-app=angular.module（'app'，[]）；
应用程序控制器（'mainCtrl'，函数（$scope）{
$scope.colors=[
{  
“颜色”：“红色”，
“值”：“f00”，
“消息”：“简单消息”
},
{  
“颜色”：“绿色”，
“值”：“0f0”，
“消息”：“带有HTML标记的消息”
},
{  
“颜色”：“蓝色”，
“价值”：“#00f”，
“信息”：“我要去工作吗？我不该去！”
}
]
$scope.popubtn=函数（消息）{
$scope.currentMessage=消息；
如果（！（$scope.popupBlock））{
$scope.popublock=true；
}
}
});

HTML

点击我


{{text.message}

您可以使用

ng show

指令：

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

---

希望有帮助。

一个简单的解决方案是使用Angular UI组件中的Angular accordion：

{{{text.message}}}

例如：

我想，这会给你你想要的东西——只显示“打开的”消息，而隐藏其他消息

---

或者，您可以滚动自己的指令，该指令在兄弟节点之间循环并隐藏所有消息，然后显示所选消息。

最好将视图中的数据与控制器分开处理。

var-app=angular.module（'app'，[]）；
应用程序控制器（'mainCtrl'，函数（$scope）{
$scope.colors=[
{  
“颜色”：“红色”，
“值”：“f00”，
“消息”：“简单消息”
},
{  
“颜色”：“绿色”，
“值”：“0f0”，
“消息”：“带有HTML标记的消息”
},
{  
“颜色”：“蓝色”，
“价值”：“#00f”，
“信息”：“我要去工作吗？我不该去！”
}
]
$scope.currentMessage=“”；
$scope.popubtn=函数（消息）{
//设置当前消息
$scope.currentMessage=消息；
//如果弹出窗口未打开，请打开它
如果（！（$scope.popublock））{
$scope.popublock=true；
}
}
});
。警报块{
背景颜色：珊瑚；
颜色：白色；
显示：无；
}
.弹出式容器{
显示：块；
}



点击我


{{currentMessage}}
button ng click=“popubtn（{{mesage}}）”这会给我一条错误消息oops
popubtn（details.message）
应该这样做。我将编辑我的答案。我已经删除了错误消息，但是{{currentMessage}}没有显示任何数据。我的装订仍然是空白的。你能用代码笔提供一个例子吗
<a ng-show = "YOUR_CONDITION">{{text.message}}</a>

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

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