Search

文字列サーチのプログラムです。
入門                Search
超初心者のプログラム入門(JavaScript)
超初心者のプログラム入門(Ｃ＃)
超初心者のプログラム入門(C/C++)
超初心者のプログラム入門(PHP)

次のリンクをクリックすると "ngp_search.html" が呼び出されます。
文字列サーチ

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_search.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 str =
[ { url: 'http://maedakobe.rw.xsi.jp/javascript/javascript.html',
    title: '超初心者のプログラム入門(JavaScript)'
  },
  { url: 'http://www.eonet.ne.jp/~maeda/cs/cs.html',
    title: '超初心者のプログラム入門(Ｃ＃)'
  },
  { url: 'http://www.eonet.ne.jp/~maeda/cpp/cpp.htm',
    title: '超初心者のプログラム入門(C/C++)'
  },
  { url: 'http://maedakobe.rw.xsi.jp/php/php.html',
    title: '超初心者のプログラム入門(PHP)'
  },
];
var app = angular.module('myApp', []);
app.controller('myController', function($scope)
{ $scope.members = str;
  $scope.onSrh = function()
  { $scope.key = $scope.srh;
  };
});
</script>
</head>

<body>
<form ng-controller="myController">
  <input id="srh" type="text" ng-model="srh" />
  <button ng-click="onSrh()">Search</button><br>
  <input id="key" type="text" ng-show="" />
  <div ng-show="key" ng-repeat="member in members | filter:srh">
    <a ng-href="{{member.url}}">
      {{member.title}} </a>
  </div>
</form>
</body>
</html>
  2. html を AngularJS の myApp モジュールに関連付けます。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app="myApp">
  3. 検索対象となるデータを文字列の配列として定義します。
    url がホームページが登録されている URL で、title がそのタイトルです。
    var str =
[ { url: 'http://maedakobe.rw.xsi.jp/javascript/javascript.html',
    title: '超初心者のプログラム入門(JavaScript)'
  },
  { url: 'http://www.eonet.ne.jp/~maeda/cs/cs.html',
    title: '超初心者のプログラム入門(Ｃ＃)'
  },
  { url: 'http://www.eonet.ne.jp/~maeda/cpp/cpp.htm',
    title: '超初心者のプログラム入門(C/C++)'
  },
  { url: 'http://maedakobe.rw.xsi.jp/php/php.html',
    title: '超初心者のプログラム入門(PHP)'
  },
];
  4. myApp モジュールを作成して myController コントローラーを登録します。
    onSrh は myController のメソッドで、srh にタイプされた検索文字列を key に設定します。
    var app = angular.module('myApp', []);
app.controller('myController', function($scope)
{ $scope.members = str;
  $scope.onSrh = function()
  { $scope.key = $scope.srh;
  };
});
  5. Search ボタンのクリックで、該当するアイテムを検索するプログラムです。
    form に "myController" を定義して、検索キーをタイプする input 領域を設定します。
    ボタンクリックで onSrh() 関数を呼び出します。
    ng-model="srh" は app.controller から参照される検索キーです。
    ng-show="" はこの項目が表示される条件で、常に非表示(隠しアイテム)です。
    ng-show="key" は ng-repeat が実行される条件で、key が設定されたときです。
    検索されたアイテムを {{member.url}} {{member.title}} で表示します。
    <form ng-controller="myController">
  <input id="srh" type="text" ng-model="srh" />
  <button ng-click="onSrh()">Search</button><br>
  <input id="key" type="text" ng-show="" />
  <div ng-show="key" ng-repeat="member in members | filter:srh">
    <a ng-href="{{member.url}}">
      {{member.title}} </a>
  </div>
</form>
  6. プログラムを起動して input box に検索キーをタイプしてボタンをクリックして下さい。
    '入門' で検索すると、全てのページが該当します。
    '(Ｃ＃)' で検索すると、(Ｃ＃) のページだけが該当します。
    '!(Ｃ＃)' は (Ｃ＃) が見つからないページのことで、３件が該当します。
    'maedakobe' で検索すると JavaScript と PHP のページが該当します。
    検索されたページの url をクリックすると、そのページが表示されます。

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