使用 bootstrap 和 angularJS 键入时没有数据
No data when typing using bootstrap and angularJS
我正在使用 typeahead 来显示我所有的 cameraid 并搜索我的数据,但它没有给我关于提前输入,因为它显示给我 [object Object]
。
有人可以帮我解决这个问题吗?
我的html文件:
<div class="container-fluid">
<h1><a href="http://localhost:8081/"><span class="glyphicon glyphicon-home
">Image Viewer</span></a></h1>
</div>
<br>
<div ng-controller="Hello" class="col-xs-12">
<b>Search:</b><br>
<input type="text" ng-model="searchBox" uib-typeahead="state for state in records | filter:$viewValue | limitTo:8" class="form-control">
<table class="table table-striped table-hover" 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 class="btn btn-primary" ng-click="toggleCustom()" onclick="myFunction()">View</button></td>
</tr>
</tbody>
</table>
我的jsp文件:
var camListApp = angular.module('camListApp', ['ui.bootstrap'])
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;
});
}]);
我的json数据:
[{"id":23,"cameraid":"001","timestamp":"2016/06/15 17:27","filename":"452c5d867b563e937d44d48ebc326c7a"},
{"id":24,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:27","filename":"ee90428e4e0c19ba9858285398bf4fbb"},
{"id":25,"cameraid":"002","timestamp":"2016/06/15 17:28","filename":"c9a4fb339f6981ffd679937724167de8"},
{"id":26,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:28","filename":"a1df86417d958e670750cf8172a2b7dd"}
实际上您要返回所有对象,这就是您获得 "object Object" 的原因,您需要指定要使用的部分。
uib-typeahead="state.cameraid as state.cameraid for state in records | filter:$viewValue | limitTo:8"
第一个 state.cameraid 是您在列表中显示的内容,第二个是值。
我正在使用 typeahead 来显示我所有的 cameraid 并搜索我的数据,但它没有给我关于提前输入,因为它显示给我 [object Object]
。
有人可以帮我解决这个问题吗?
我的html文件:
<div class="container-fluid">
<h1><a href="http://localhost:8081/"><span class="glyphicon glyphicon-home
">Image Viewer</span></a></h1>
</div>
<br>
<div ng-controller="Hello" class="col-xs-12">
<b>Search:</b><br>
<input type="text" ng-model="searchBox" uib-typeahead="state for state in records | filter:$viewValue | limitTo:8" class="form-control">
<table class="table table-striped table-hover" 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 class="btn btn-primary" ng-click="toggleCustom()" onclick="myFunction()">View</button></td>
</tr>
</tbody>
</table>
我的jsp文件:
var camListApp = angular.module('camListApp', ['ui.bootstrap'])
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;
});
}]);
我的json数据:
[{"id":23,"cameraid":"001","timestamp":"2016/06/15 17:27","filename":"452c5d867b563e937d44d48ebc326c7a"},
{"id":24,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:27","filename":"ee90428e4e0c19ba9858285398bf4fbb"},
{"id":25,"cameraid":"002","timestamp":"2016/06/15 17:28","filename":"c9a4fb339f6981ffd679937724167de8"},
{"id":26,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:28","filename":"a1df86417d958e670750cf8172a2b7dd"}
实际上您要返回所有对象,这就是您获得 "object Object" 的原因,您需要指定要使用的部分。
uib-typeahead="state.cameraid as state.cameraid for state in records | filter:$viewValue | limitTo:8"
第一个 state.cameraid 是您在列表中显示的内容,第二个是值。