내 mongorepository

를 AngularJS와하는 MongoDB를에서 데이터를 검색내 mongorepository

import org.springframework.data.mongodb.repository.MongoRepository; 

public interface RecordRepository extends MongoRepository<Record, String> { 
}

내 모델 :

public class Record { 

private long id; 
private String cameraid; 

@JsonSerialize(using=DateTimeSerial.class) 
private DateTime timestamp; 
private String filename; 


public Record(long id,String cameraid, DateTime timestamp, String filename) { 
    this.id=id; 
    this.cameraid = cameraid; 
    this.timestamp = timestamp; 
    this.filename = filename; 
} //getters and setters

내 컨트롤러 : MongoDB의에서

@RequestMapping(value="list") //controller for list 
public List<Record> getList() { 
     List<Record> recordList = rep.findAll(); 


     return recordList; 
} 
}

내 데이터

{"id":1,"cameraid":"001","timestamp":"2016/06/15 15:03","filename":"e997a7321a3d2966802ba466feca69f8"}, 
{"id":2,"cameraid":"001","timestamp":"2016/06/15 15:03","filename":"63999edc2218f490cd883592fe5d26a1"}, 
{"id":3,"cameraid":"002","timestamp":"2016/06/15 15:03","filename":"9ba6722aed8aa1aae0e4545ee6d376c3"},

내 html 파일

var camListApp = angular.module('camListApp', []); 
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; 
    }); 
}]);

이 어떻게하여 MongoDB에서 내 cameraid 데이터 "001"과 "002"의 두 가지 검색 할 수 있습니다

<!DOCTYPE html> 
<html ng-app='camListApp'> 
<head> 

<style> 
#myDIV { 
width: 500px; 
height: 500px; 
position: relative; 
right: 20px; 
top: 90px; 
} 

table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
</style> 
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"> 
</script> 
<script src="hello.js"></script> 
<title>Image viewer </title> 
</head> 

<body> 
<h3>Search by cameraid:</h3><br> 
<select ng-model="searchBox" style="width:25%"> 
<option value="000000006f4280af">{{record.cameraid}}</option> 
</select> 


<div ng-controller="Hello"> 

<br> 
<table style="width:50%"> 
    <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><button ng-click="toggleCustom()" onclick="myFunction()">View</button></td> 

     </tr> 
    </tbody> 
    </table> 
    <span id="myDIV" ng-hide="custom"><img src="" width="300" height="300"> 
    </span> 

    <!--<span ng-hide="custom">To: 
     <input type="text" id="to" /> 
    </span>--> 
    <span ng-show="custom"></span> 
    </div> 
    <script> 
function myFunction() { 
document.getElementById("myDIV").style.position = "absolute"; 
} 
</script> 

</body> 
</html>

내 JS 파일은 AngularJS와를 사용하여 내 드롭 다운리스트에 표시하는? "http://localhost:8081/camera/list"은 내 웹 서비스의 모든 데이터를 표시합니다. 아무도 내 질문에 나를 도울 수 있습니까?

출처

2016-06-15 Alvin Wee

또한 서버 측 코드를 표시하십시오. db에서 데이터 가져 오기를 시도 했습니까? – Shrabanee

'console.log (응답);은 무엇을 제공합니까? – Shrabanee

@ titi23 나는 그것을 검색하는 방법에 대한 생각이 없기 때문에 내 dropdownlist에 두 개의 카메라 ID를 가져 오려고하지 않습니다. –

코드는 서버 측에 따라 다르지만이 코드를 사용해보십시오. 나는 그것이 효과가 있기를 바란다. 전체 서버 코드가 없습니다. JS는 다음과 같이 수정해야합니다 :

는 선택 요소에 HTML로

 var camListApp = angular.module('camListApp', []); 
     camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){ 
var value1="001"; 
var value2="002"; 
       $http.get('http://localhost:8081/camera/list?value1='+ value1+'&value2='+ value2).then(function(response) { 
       console.log(response); 
        $scope.records= response.data; 
       }); 
     }]);

이 에 당신은 Object 또는 JSON 문자열 때문에 rep.findAll() 반환를 반환해야

@RequestMapping(value="list") //controller for list 
    public List<Record> getList(@RequestParam("value1") String value1, @RequestParam("value2") String value2) { 
      List<Record> recordList = new ArrayList<Record>(); 
List<Record> valueRecord1=rep.findByCameraId(value1); 

List<Record> valueRecord2=rep.findByCameraId(value2); 
recordList.add(valueRecord1); 
recordList.add(valueRecord2); 
return recordList; 
    }

출처

2016-06-15 08:55:47 Deepanjan

내 서버 측 코드가 이미 표시되었습니다. –

이것은 올바르게 작동합니다. – Deepanjan

{{records.cameraid를}} 변경 Iterable 인터페이스. 예를 들어 Jackson ObjectMapper 클래스를 사용하는 JSON의 경우 :

ObjectMapper mapper = new ObjectMapper(); 
String output = "[]"; 
try { 
    output = mapper.writeValueAsString(rep.findAll()); 
} catch (Exception e) { 
    e.printStackTrace(); 
} 
return output;

출처

2016-06-15 09:08:23

내 mongorepository

답변

관련 문제