我的html文件:
<html ng-app='camListApp'>
<div ng-controller="Hello">
<h3>Search:</h3><br>
<select ng-model="searchBox" ng-options="x.cameraid as x.cameraid for x in records| unique:'cameraid'">
<option value="">{{x.cameraid}}</option>
</select>
我当前的js文件:
var camListApp = angular.module('camListApp', []);
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
camListApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
$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":"000000006f4280af","timestamp":"2016/06/15 17:27","filename":"452c5d867b563e937d44d48ebc326c7a"},
{"id":24,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:27","filename":"ee90428e4e0c19ba9858285398bf4fbb"},
{"id":25,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:28","filename":"c9a4fb339f6981ffd679937724167de8"},
{"id":26,"cameraid":"000000006f4280af","timestamp":"2016/06/15 17:28","filename":"a1df86417d958e670750cf8172a2b7dd"}
为什么我无法显示我的cameraid唯一值&#34; 000000006f4280af&#34;在我的下拉列表中?我使用ng-option为我的cameraid显示唯一值。有人可以帮我解决这个问题吗?
答案 0 :(得分:0)
要达到预期效果,请使用以下选项
ng-options -x.cameraid for x in records | unique:'cameraid(帖子中的语法错误)
<div ng-app="camListApp" ng-controller="Hello">
<select ng-model="searchBox" ng-options="x.cameraid as x.cameraid for x in records| unique:'cameraid'">
<option value="">{{x.cameraid}}</option>
</select>
</div>
在js文件中创建过滤器,如下所示
camListApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
Codepen网址 - http://codepen.io/nagasai/pen/dXXzLY供参考。
希望这适合你:)