Question

我尝试将此网站上的在线代码（http://jsfiddle.net/sebmade/swfjT/）用于我的程序，但仍然没有向我显示与他的程序类似的输出。因为我也想通过cameraid搜索。有人可以帮帮我吗？

我的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>

Answer 1

如果您不介意使用ui-bootstrap（为角度编写的引导组件），您可以使用map。

你可以通过多种方式安装ui-bootstrap，看看typeahead directive

编辑：出于测试目的，您可以从CDN下载所有资源，在typeahead示例页面上检查plunker，您可以看到这些资源：

 <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">

如何在angularjs

1 个答案: