4
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ng-ifとng-showの違い

Posted at

コードを書いているときに,ng-ifとng-show違いを知らなくて詰まってしまったので,違いを調べて,実験してみました.

■違い
ng-ifは,ng-ifに割り当てられている変数が,falseになるとDOMから削除される.
ng-showは,DOMから削除されない.

■結果
ng-ifがfalseのときに,

の中に書かれている文字列("aaaaa")を取得してみる. → 取得できない.
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());
    }
4
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?