AngularJsを使ってみる(1) - Computer Technology archive

はじめに

AngularJsに興味がありサンプルを作りました。

コードはチュートリアルを改造して作りました。公開します。

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
</head>
<body>
<div ng-init="urlList = [{url:'http://www.goo.ne.jp/', name:'goo'},
 {url:'http://www.google.co.jp', name:'Google'},
 {url:'http://www.msn.co.jp', name:'MSN'},
 {url:'http://www.yahoo.co.jp', name:'Yahoo'}]">
</div>
Search Site Search:
<input ng-model="searchText.name">
<div ng-show="searchText.name">
<table id="searchTextResults">
<tr>
<th>Url</th>
<th>Name</th>
<th>Link</th>
</tr>
<tr ng-repeat="urlData in urlList | filter:searchText:strict">
<td>{{urlData.url}}</td>
<td>{{urlData.name}}</td>
<td><a href="{{urlData.url}}">{{urlData.name}}</a></td>
</tr>
</table>
</div>
</body>
</html>

簡単なフィルター処理です。

<div ng-show="searchText.name">

で入力がある場合はフィルターしたデータを表示させています。