function HogeController($scope, $location) { $scope.ngModel = "ng-model"; $scope.ngRepeat = ["AngularJSは", "ng-repeatで", "repeatする"]; $scope.ngInit1 = "ngInit1!!"; $scope.ngInit2 = function () { $scope.ngInit1 = "ngInit2!!" }; $scope.ngShow = "ngShow!!"; $scope.ngHide = "ngHide!!?"; $scope.ngIf = "ngIf!!"; $scope.ngClass = "red"; $scope.ngClick = function () { alert('ngClick!!'); }; }
<h2>AngularJS</h2> <div ng-app> <div ng-controller="HogeController"> <!-- ng-model --> <input ng-model="ngModel"> <div>AngularJSは{{ngModel}}で指定した入力値と連動する</div> <hr> <!-- ng-repeat --> <div ng-repeat="v in ngRepeat"> <p>{{v}}</p> </div> <hr> <!-- ng-init --> <input ng-model="ngInit1"> <div ng-init="ngInit2()">AngularJSのng-initは読み込み時に呼ばれるので初期値設定とかに使える</div> <hr> <!-- ng-show --> <input ng-model="ngShow"> <div ng-show="ngShow === 'ngShow!!'">AngularJSのng-showはCSSのdisplayプロパティで表示・非表示を切り替える</div> <hr> <!-- ng-hide --> <input ng-model="ngHide"> <div ng-hide="ngHide === 'ngHide!!'">AngularJSのng-hideはng-showの逆の判定で表示・非表示を切り替える</div> <hr> <!-- ng-if --> <input ng-model="ngIf"> <div ng-if="ngIf === 'ngIf!!'">AngularJSのng-ifはng-show,ng-hideと違って中の要素ごと削除する</div> <hr> <!-- ng-class --> <input ng-model="ngClass"> <div ng-class="{'ng-class-red': ngClass === 'red', 'ng-class-blue': ngClass === 'blue'}">AngularJSのng-classは条件trueになるclassを要素につけられる</div> <hr> <!-- ng-click --> <div ng-click="ngClick()">AngularJSのng-clickは要素にclickイベントをつけられる</div> </div> </div>
.ng-class-red { color: red; } .ng-class-blue { color: blue; }