2016-06-16 19 views
-2

私のhtmlファイル:angularJSとNG-オプションを使用してunqiue値を取得

<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ファイル:Webサービスの

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一意の値 "000000006f4280af"を表示することはできません?私は自分のカメラIDに固有の値を表示するためにng-optionを使いました。誰も私がこれを解決するのを助けることができますか?

+1

'ng-options'ドキュメントを読んでください。オブジェクトの配列に対して適切に使用していません。 – charlietfl

答えて

0

NG-オプションは、レコード内のxに対して-x.cameraidオプションの下に使用し、期待される結果を達成するために|ユニーク:「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> 

として

 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のURLの下にあなたのjsファイル内でフィルタを作成する - 参照のためhttp://codepen.io/nagasai/pen/dXXzLY

これはうまくいきます。

+0

エラー:[$ injector:unpr] http://errors.angularjs.org/1.4.0/$injector/unpr?p0=uniqueFilterProvider%20%3C-%20uniqueFilterこのエラーが発生しました –

+0

camListApp.filterを作成しましたか? ?? –

+0

私はJsファイルに実装しています –

関連する問題