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