Laddy in

Programming & Technology!!

NEW ARTICLE
windows11拡張機能で画像文字読み込み
  • angular.jsをチュートリアルから学ぶ step4 Two-way Data Binding

angular.jsをチュートリアルから学ぶ step4 Two-way Data Binding




今回のstep4ではDataBindingについてです。
セレクトボックスで選択した要素で並び替えるサンプルです。

目次

step3との差分ソースコード

セレクトボックス部分


<select ng-model="orderProp">
  <option value="name">アルファベット順</option>
  <option value="age">新着順</option>
</select>

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

リスト要素の中にorderBy要素が追加されています。

コントローラ内の追加部分 orderByの初期値設定


    $scope.orderProp = 'age';

セレクト要素内のng-modelでorderPropのデータ要素を変更して、
Phonesリストの中のorderByに渡してリストの再表示を行う形になります。




ソースコード全体


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>

<div ng-app="phonecatApp">
<div class="container" ng-controller="PhoneListCtrl">

<input ng-model="query">

<h3>Phone Gallery: {{query}}</h3>
<select ng-model="orderProp">
  <option value="name">アルファベット順</option>
  <option value="age">新着順</option>
</select>

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script>
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
    $scope.phones = [
        {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.', 'age': 1},
        {'name': 'Motorola XOOM with WiFi', 'snippet': 'The Next, Next Generation tablet.', 'age': 2},
        {'name': 'Motorola XOOM', 'snippet': 'The Next, Next Generation tablet.', 'age': 3},
        {'name': 'Motorola XOOM2', 'snippet': 'The Next, Next Generation tablet.', 'age': 4},
        {'name': 'Motorola XOOM4', 'snippet': 'The Next, Next Generation tablet.', 'age': 6},
        {'name': 'Motorola XOOM5', 'snippet': 'The Next, Next Generation tablet.', 'age': 7},
        {'name': 'Motorola XOOM3', 'snippet': 'The Next, Next Generation tablet.', 'age': 5},
    ];
    $scope.orderProp = 'age';
});
</script>

</body>
</html>

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js