Angular 개별적으로 JSON 객체 표시 및 숨기기

각 객체는 개별 메시지에 있습니다. JSON 파일에서 데이터를 가져옵니다. 그 순간 나는 메시지를 보여주고 숨기는 방법을 찾기 위해 고심하고있다. 예를 들어 내가 객체를 클릭 할 때 해당 객체의 자격 증명 만 표시하고 다른 객체의 자격 증명은 표시하지 않으려합니다.Angular 개별적으로 JSON 객체 표시 및 숨기기

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

예를 들어, 당신의 상태와 YOUR_CONDICTION 교체 : 데 도움이

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

희망

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>

출처

2016-07-04 NewBoy

보기 안의 데이터를 컨트롤러와 별도로 처리하면 더 좋습니다.

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>

출처

2016-07-04 11:26:55 Harish

버튼 NG는-클릭 = "popupBtn는 ({{메세지를 지정하지 않고는}})"이 나에게 오류 메시지가 – NewBoy

죄송 줘! 'popupBtn (details.message)'가 그것을해야합니다. 나는 내 대답을 편집 할 것이다. – Harish

그러나 오류 메시지를 제거했습니다. {{currentMessage}}은 (는) 데이터를 표시하지 않습니다. 내 바인딩은 비어 있습니다. codepen에서 예제를 제공 할 수 있습니까? – NewBoy

당신은 ng-show 지시어를 사용할 수 있습니다.

출처

2016-07-04 11:19:12

간단한 해결책은 각도 UI 구성 요소에서 각도 아코디언을 사용하는 것입니다 : 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

이 내가 생각하는 당신이 찾고있는 당신을 줄 것이다 -에 "열린"메시지 만 표시하고 다른 메시지는 숨 깁니다.

또는 형제를 반복하고 모든 메시지를 숨긴 지시문을 굴린 다음 선택한 메시지를 표시 할 수 있습니다.

출처

2016-07-04 11:25:08 seanhodges

Angular 개별적으로 JSON 객체 표시 및 숨기기

답변

관련 문제