今さら人に聞けないmonacaのangularでのngIfについて

ある特定の条件ではdomを表示し、それ以外の場合は非表示みたいなことをmonacaのangularで実装するにはどうすればいいのか調べました。

APIリファレンスに表示されているメニューをざーっと見たところngifというのが目についたのでこれかなと思いさっそく試しに組んでみることにしました。

まずは、下のようにプログラムを作りました。

<ons-page ng-controller="MainPageController">
  <div ng-if="isShow">showed</div>
</ons-page>
<script>
var module = angular.module('mainApp', ['onsen']);
module.controller('MainPageController', function($scope) {
  $scope.isShow = true;
});
</script>

実行すると、divタグが表示されたので、逆に、下のようにfalseを設定してみました。

<ons-page ng-controller="MainPageController">
  <div ng-if="isShow">showed</div>
</ons-page>
<script>
var module = angular.module('mainApp', ['onsen']);
module.controller('MainPageController', function($scope) {
  $scope.isShow = false;
});
</script>

表示してみると、想定通り、divタグが非表示になりました。

ただ、これ、domの操作によって表示したり非表示にしたりしたいので、動的に変更できるのかなと思い、試しに下のように組んでみました。

<ons-page ng-controller="MainPageController">
  <div ng-if="isShow">showed</div>
  <ons-button ng-click="_toggle()">Run</ons-button>
</ons-page>
<script>
var module = angular.module('mainApp', ['onsen']);
module.controller('MainPageController', function($scope) {
  $scope.isShow = true;
  $scope._toggle = function(){
    $scope.isShow = ($scope.isShow)? false : true;
  };
});
</script>

するとどうでしょう。実行すると、確かにボタンを押す度に表示されたり、非表示になったりと想定通りの動きになりました。