2017-04-24 5 views
0

私はAngularJSを学んで、AngularJSを起動して実行しています。この本はAngularJSバージョン1.2を使用しています。本のサンプルコードの1つは、ng-showディレクティブがどのように動作するかを示しています。AngularJS 1.2でSPAN要素を隠していないng-show

NGショー変数を検査し、その 値、ショーのtruthinessに応じて、または、それぞれ、UIの要素を非表示に次のように、この例ではNG-ショーディレクティブの使用の説明が与えられます。この場合、 は、note.assigneeがtrueの場合にassignee spanを表示します。 AngularJSは、 真で非空の文字列、非ゼロの数字、および非ヌルのJSオブジェクトを 真実として扱います。 この場合、注釈 に譲受人がある場合、譲受人のスパンが表示されます。

以下のコードを貼り付けています。 (私のクエリがコードの後に​​与えられる。)

HTML:上記のコードで

<!-- File: chapter2/more-directives.html --> 
<html ng-app="notesApp"> 
<head> 
<title>Notes App</title> 
<style> 
.done { 
background-color: green; 
} 
.pending { 
background-color: red; 
} 
</style> 
</head> 
<body ng-controller="MainCtrl as ctrl"> 
<div ng-repeat="note in ctrl.notes" 
ng-class="ctrl.getNoteClass(note.done)"> 
<span class="label"> {{note.label}}</span> 
<span class="assignee" 
ng-show="note.assignee" 
ng-bind="note.assignee"> 
</span> 
</div> 
</body> 
</html> 

スクリプト

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> 
</script> 
<script type="text/javascript"> 
angular.module('notesApp', []).controller('MainCtrl', [ 
function() { 
var self = this; 
self.notes = [ 
{label: 'First Note', done: false, assignee: 'Shyam'}, 
{label: 'Second Note', done: false}, 
{label: 'Done Note', done: true}, 
{label: 'Last Note', done: false, assignee: 'Brad'} 
]; 
self.getNoteClass = function(status) { 
return { 
done: status, 
pending: !status 
}; 
}; 
}]); 
</script> 

、配列が宣言され、二つの要素が(存在さ最初と最後)が割り当てられています。このコードを実行すると、配列のすべての要素が表示されます。 ng-showディレクティブは、 '代理人'にヌル値を持つ 'span'を隠すわけではありません。コードが間違っているか、ng-showの理解が間違っていますか?

答えて

0

それはこの

<div ng-show="note.assignee"> 
    <span class="label"> {{note.label}}</span> 
    <span class="assignee" ng-bind="note.assignee"></span> 
</div> 
+0

オーケーのようにする必要があります。私は今それを理解する。基本的に、サンプルコードは代入先スパンのみを処理しているので、ラベルのスパンも隠す必要があります。 Divタグにng-showを付けることが私にとっての解決策です。 – KurioZ7

関連する問題