読み込み
CDNを読み込み。
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
宣言
<body ng-app>
View
テキスト
{{メソッド名}}
attrの付与
ng-click="メソッド名()"
classの付与
even、oddで交互にclass付与可能。
<div ng-class-even="'クラス名'"></div>
Controller
html側の設定
<div ng-controller="helloCtrl">
<span>{{hello}}</span>
</div>
⇒controller内にcontrollerの入れ子も可能、親を継承。
js
基本の形はこれ。
function コントローラー名($scope){
$scope.メソッド名 = xxx;
}
上のHTMLに対応させるとこんな感じ。
function helloCtrl($scope){
$scope.hello = "Hello, World";
}
次に、クリックで反応させるとなるとこんな感じ。
<button ng-click="goodbye()">Good Byeに変更</button>
function helloCtrl($scope){
$scope.goodbye = function(){
$scope.hello = "Good Bye";
}
}
Tips
データとリピートについて
$scope.users = [
{"name":"A", "score":"1"},
{"name":"B", "score":"2"},
]
{{users.length}}
リピート内では、userになる。
ng-repeat="リピート内の変数名 in 元の変数名"
<div ng-repeat="user in users">
{{user.name|uppercase}} //大文字
</div>
indexを取得
<div ng-repeat="user in users">
{{$index+1}} //◎番目かを返す。
{{$first}} //1番目true、それ以外false。
{{$middle}} //first、last以外true。
{{$last}} //最後true、それ以外false。
</div>
フィルタについて
お金
|currency:"¥"日付
|date:'yyyy-MM-dd'
var today = new Date();
{{today|date:'yyyy-MM-dd'}}
順番
|orderBy:'-score' //scoreの大きいもの順。-を外せば小さいもの順。個数限度
|limitTo:3 //3つだけ抽出文字フィルタ
inputの内容に応じて表示される。
<input type="text" ng-model="query"> //全プロパティに反応
<input type="text" ng-model="query.name"> //nameプロパティにしか反応しない
<div ng-repeat="user in users|filter:query">
その他
- htmlの{{}}内はjs動く（？） {{5 * 3}} と記述すると、ブラウザでは15 と出る。