anglejsでオートコンプリートテキストボックスを行う方法

このウェブサイト（http://jsfiddle.net/sebmade/swfjT/）のオンラインコードを自分のプログラムに使用しようとしましたが、彼のプログラムに似た出力は表示されません。私もcameraidで検索したいので。誰でも私を助けることができますか？anglejsでオートコンプリートテキストボックスを行う方法

Angular JS GUI

私のJSPファイル

var camListApp = angular.module('camListApp', []).directive('autoComplete', function($timeout) { 
return function(scope, iElement, iAttrs) { 
     iElement.autocomplete({ 
      source: scope[iAttrs.uiItems], 
      select: function() { 
       $timeout(function() { 
        iElement.trigger('input'); 
       }, 0); 
      } 
     }); 
}; 
}); 
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){ 

$scope.custom = true; 
$scope.toggleCustom = function() { 
    $scope.custom = ! $scope.custom; 

}; 
$http.get('http://localhost:8081/camera/list').then(function(response) { 
    console.log(response); 
     $scope.records= response.data; 
    }); 
}]);

私のHTMLファイル：

<!DOCTYPE html> 
<html ng-app="camListApp"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> </script> 
<script src="hello.js"></script> 

<title>Image viewers</title> 
</head> 

<body> 
<div ng-controller="Hello"> 

<h3>Search:</h3><br> 
<input auto-complete ui-items="records.cameraid" ng-model="searchBox"> 
<br> 

<table style="width:55%"> 
    <thead> 
     <tr> 

     <th>CamID</th> 
     <th>Timestamp</th> 
     <th>View Image</th> 

     </tr> 
    </thead> 

    <tbody> 

     <tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'"> 

     <td>{{record.cameraid}}</td> 
     <td>{{record.timestamp}}</td> 
     <td>{{record.filename}}</td> 
     <td><button>View</button></td> 

     </tr> 
    </tbody> 
    </table> 

    </body> 
    </html>

出典

2016-06-16 Alvin Wee

あなたは（ブートストラップコンポーネントは、角のために書かれた）UI-ブートストラップを使用することを気にしない場合は、 typeahead directiveを使用できます。

あなたは、多くの方法でUI-ブートストラップを取り付け、ここで見てみることができますbower, npm etc

EDIT：あなたが先行入力例のページでplunkerをチェックし、CDNからすべてのリソースをダウンロードすることができ、テストの目的のために、あなたはそこにこれらのリソースを参照することができます：

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

出典

2016-06-16 12:20:06

ブートストラップをインストールする必要はありますか？以前はブートストラップを使ってみることはありません。 –

こんにちはAlvin、実際にブートストラップCSSテンプレートをインストールする必要がありますが、ブートストラップ自体についての知識は必要ありません。あなたはマニュアルページからサンプルをたどってbootstrap-uiをインストールし、typeaheadディレクティブ –

のみを使用することができます。スタニスラフこんにちは、代わりにhtmlファイルにブートストラップCSSライブラリをコピーして貼り付けることはできますか？ –

anglejsでオートコンプリートテキストボックスを行う方法

答えて

関連する問題