Question

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


   });

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>

Answer 1

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

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>

Answer 2

您可以使用ng-show指令：

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

将YOUR_CONDICTION替换为您的条件，例如：

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

希望有所帮助。

Answer 3

一个简单的解决方案是使用Angular UI组件中的Angular手风琴：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>

示例：http://plnkr.co/edit/ttdSZmEWJwwfBwuHTghG?p=preview

这将为您提供我想要的内容 - 仅显示“已打开”的消息，并隐藏其他消息。

或者，您可以滚动自己的指令，循环遍历兄弟姐妹并隐藏所有消息，然后显示所选消息。

Angular单独显示和隐藏JSON对象

3 个答案: