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

ボタン= "popupBtn（{{メッセージを指定する}}）" NG-クリックこれは私にエラーメッセージ – NewBoy

おっとを与えます！ 'popupBtn（details.message）'はそれを行うべきです。私は私の答えを編集します。 – Harish

私はエラーメッセージを取り除きましたが、 {{currentMessage}}はデータを表示していません。私のng-bindingは空白のままです。あなたは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オブジェクトを表示および非表示にする

答えて

関連する問題