目次
バインドされたデータを加工する仕組み。
単一の値用と配列用とがある。
(function () {
var app = angular.module("MemberManager");
// 性別フィルタ
// 'male'なら'男'、'female'なら'女'を返す
app.filter("gender", function () {
return function (value) {
if (value == 'male') return '男';
if (value == 'female') return '女';
return '？';
};
});
// 性別選別フィルタ
// 指定した性別だけを通す
// m : 男性
// f : 女性
// b : 両方
// それ以外 : 何も通さない
app.filter('genderSelect', function () {
return function (values, flag) {
if (!angular.isArray(values)) return values;
if (flag == 'b') return values;
var newValues = [];
angular.forEach(values, function (v) {
if ((flag == 'm' && v.gender == 'male') ||
(flag == 'f' && v.gender == 'female'))
newValues.push(v);
});
return newValues;
}
});
}());
ListControllerのスコープにflagを追加した。この値を見て、list.htmlで表示する性別を切り替える。
// リストコントローラ
app.controller("ListController", function ($scope, MemberService) {
$scope.members = MemberService.members;
$scope.flag = 'm';
});
表示する性別を選択できるようにした。ng-modelでListControllerのflagと結んでいる。
<p>
<button ng-click="changeUrl('regist')">新規登録</button>
</p>
<select ng-model="flag">
<option value='b'>両方</option>
<option value='m'>男</option>
<option value='f'>女</option>
<option value=''>なし</option>
</select>
<table border="1" width="100%">
<tr>
<th>ID</th>
<th>氏名</th>
<th>性別</th>
<th>メール</th>
<th>血液型</th>
<th>更新日</th>
</tr>
<tr ng-repeat="m in members|genderSelect:flag">
<td>{{m.id}}</td>
<td><a href="#/modify/{{$index}}">{{m.name}}</a></td>
<td>{{m.gender|gender}}</td>
<td>{{m.mail}}</td>
<td>{{m.bloodtype}}</td>
<td>{{m.modified | date:'yyyy年MM月dd日 HH時mm分ss秒'}}</td>
</tr>
</table>
フォームの入力欄に入力されるデータを検証できる機能。
<h3>新規登録</h3>
<p>新しい会員情報を入力してください。</p>
<form novalidate name="RF">
<p>氏名：
<input type="text" name="NM" ng-model="name" required/>
<span ng-show="RF.NM.$invalid">※必須項目です</span>
</p>
<p>性別：
<input type="radio" name="gender" value="male" ng-model="gender" />男
<input type="radio" name="gender" value="female" ng-model="gender" />女</p>
<p>メール：
<input type="email" name="MA" ng-model="mail" required/>
<span ng-show="RF.MA.$invalid">※必須項目です</span>
</p>
<p>血液型：
<select ng-model="bloodtype">
<option>A</option>
<option>B</option>
<option>AB</option>
<option>O</option>
</select>
</p>
<p>
<button ng-click="registClicked()" ng-disabled="RF.$invalid">
新規登録
</button>
<button onclick="history.back()">キャンセル</button>
</p>
</form>