リスト操作

ng-repeat を用いて、リスト操作を行います。
    ・Tanaka 36
    ・Suzuki 16
    ・Yamada 26

3 members

次のリンクをクリックすると "ngp_list.html" が呼び出されます。
リスト操作

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_list.html" です。
    <!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function() {
    this.members = [
        { name: 'Tanaka', age: 36 },
        { name: 'Suzuki', age: 16 },
        { name: 'Yamada', age: 26 }
    ];
});
</script>
</head>

<body>
 <div ng-controller="myController as myCtrl">
  <ul>
  <li ng-repeat="member in myCtrl.members">{{member.name}} {{member.age}}</li>
  </ul>
  <div>{{myCtrl.members.length}} members</div>
 </div>

</body>
</html>
  2. html を AngularJS の myApp モジュールに関連付けます。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app="myApp">
  3. myApp モジュールを作成して myController コントローラーを登録します。
    members で登録するデータ(文字列)を配列として定義します。
    <script>
var app = angular.module('myApp', []);
app.controller('myController', function() {
    this.members = [
        { name: 'Tanaka', age: 36 },
        { name: 'Suzuki', age: 16 },
        { name: 'Yamada', age: 26 }
    ];
});
</script>
  4. div で myController を定義します。
    登録されたデータ(members)を ng-repeat で繰り返して、{{member.name}} {{member.age}} で表示します。
    {{myCtrl.members.length}} members で表示された件数を印字します。
     <div ng-controller="myController as myCtrl">
  <ul>
  <li ng-repeat="member in myCtrl.members">{{member.name}} {{member.age}}</li>
  </ul>
  <div>{{myCtrl.members.length}} members</div>
 </div>
  5. <li を次のように書き換えると age でソートして表示されます。
      <li ng-repeat="member in myCtrl.members|orderBy:'age'">{{member.name}} {{member.age}}</li>
  6. 大きい順に age でソートするときは次のように書きます。
      <li ng-repeat="member in myCtrl.members|orderBy:'age':true">{{member.name}} {{member.age}}</li>

次のリンクをクリックすると "ngp_list_srh.html" が呼び出されます。
リスト検索

検索機能

  1. リスト操作に検索機能を追加します。
    div を次のように修正して下さい。
     <div ng-controller="myController as myCtrl">
  <input type="text" ng-model="searchText">
  <ul>
  <li ng-repeat="member in myCtrl.members|filter:searchText">{{member.name}} {{member.age}}</li>
  </ul>
 </div>
  2. text ボックスにタイプ入力した文字列に該当するデータだけが表示されます。
    例えば「16」をタイプすると「Suzuki 16」だけが表示されます。
  3. 実行してみればわかるように、１文字タイプする毎に該当するデータが検索されます。
    これではデータ件数が増えると、不必要な検索操作が繰り返され効率が悪すぎます。
    そこでボタンのクリックで検索が実行されるような工夫が必要です。
    ボタンのクリックで実行されるプログラムは Button Click や Event を参照して下さい。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)