読者です 読者をやめる 読者になる 読者になる

AngularJS チュートリアル step-3


f:id:Naotsugu:20140418011743p:plain


前回からの続きになります。



テンプレートとして index.html を以下のように変更。
app/index.html

<!doctype html>
<html lang="ja" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Phone Gallery</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="PhoneListCtrl">

  Search: <input ng-model="query">
  <ul class="phones">
    <li ng-repeat="phone in phones | filter:query">
      {{phone.name}}
      <p>{{phone.snippet}}</p>
    </li>
  </ul>
 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  <script src="js/controllers.js"></script>

</body>
</html>



<input ng-model="query"> タグにて ng-model ディレクティブを定義して query に入力内容をバインド
<li ng-repeat="phone in phones | filter:query"> タグにて ng-repeat に入力された query でフィルタを指定


入力内容に応じてリストの出力がフィルタリングされる。
f:id:Naotsugu:20140103133040p:plain


タイトルに入力内容を反映

<!doctype html>
<html lang="ja" ng-app="phonecatApp" ng-controller="PhoneListCtrl">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery: {{query}}</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  Search: <input ng-model="query">
  ・・・


<body> タグにあった ng-controller ディレクティブを <html> タグ内に移動
<title>Phone Gallery: {{query}}</title> とすることで、head 内でスコープが有効となり query の内容が表示できる。