使用带有angularJS的ng-option检索unqiue值

时间:2016-06-16 03:14:55

标签: javascript angularjs

我的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显示唯一值。有人可以帮我解决这个问题吗?

1 个答案:

答案 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供参考。

希望这适合你:)