表示の切替する

表示したり、非表示にしたり切替をします。

<html ng-app>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

 <button ng-click="switching=switching?false:true;" >ボタン</button>
 <span ng-show="switching">表示されました。もう一度ボタンを押すと非表示になります。</span>
</html>
				
<html ng-app>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
 <script src="script.js"></script>

 <div ng-controller="switchingCtrl">
  <button ng-click="switching_fnc()" class="btn btn-info">ボタン</button>
  <span ng-show="switching">表示されました。もう一度ボタンを押すと非表示になります。</span>
 </div>
</html>
				
var switchingCtrl = function($scope) {

 $scope.switching = false;
 
 $scope.switching_fnc = function() {
  
  if($scope.switching) {
   $scope.switching = false;
  }else {
   $scope.switching = true;
  }
  
 };
 
}
				

ループのデモ

表示されました。もう一度ボタンを押すと非表示になります。

解説

重要なポイント

  • ng-controllerで実行処理を取得
  • ng-repeatでループ処理

[ng-controller]で曜日を定義し、[ng-repeat]でループ出力しています。