コードを書いているときに,ng-ifとng-show違いを知らなくて詰まってしまったので,違いを調べて,実験してみました.
■違い
ng-ifは,ng-ifに割り当てられている変数が,falseになるとDOMから削除される.
ng-showは,DOMから削除されない.
■結果
ng-ifがfalseのときに,
の中に書かれている文字列("aaaaa")を取得してみる. → 取得できない.
ng-showがfalseのときに,
ng-showがfalseのときに,
の中に書かれている文字列("bbbbb")を取得してみる. → "bbbbb"が取得できる.
test.html
<div ng-click="waa(miseru)">ここを押すとけしたりだしたりするよ</div>
<div ng-click="check()">ここを押すと取得できるかわかるよ</div>
<div ng-show="miseru" id="a">aaaaa</div>
<div ng-if="miseru" id="b">bbbbb</div>
test.js
$scope.miseru = true;
$scope.waa = function (miseru) {
console.log("aaa");
if (miseru) {
$scope.miseru = false;
} else {
$scope.miseru = true;
}
}
$scope.check = function () {
console.log("ng-show:" + $('#a').text());
console.log("ng-if" + $('#b').text());
}