如何使用来自Web服务的JSON数据填充Angular中的表？

Question

我有一个链接，当找到名字时显示JSON数据。

 http://localhost:8080/application/names/find?firstname=f_name&LastName&Address&Status= 

例如：如果我用Tim代替f_name，我得到这个JSON响应。

 [{"f_name": "Tim","address": "Road","phone": "1234","status": "busy"}]

如果我将F_name替换为Sue，则会收到此JSON响应。

 [{"f_name": "Sue","address": "Street","phone": "4321", "status": "available"}]

我希望能够输入Tim或Sue并获取相应的数据。 这就是我所拥有的。

 $http.get('http://localhost:8080/application/names/find?firstname=f_name&LastName&Address&Status=').
  success(function(data) {
 $scope.jsonData = data;
 alert("Success");
}).
error(function(data) {
alert("Invalid URL");
});


 $scope.results = [];
 $scope.clickButton = function(enteredValue) {

    $scope.items = $scope.jsonData;

    angular.forEach($scope.items, function (item) {
        if(item.f_name === enteredValue){
            $scope.results.push({
                name: enteredValue,
                address: item.address,
                number: item.phone, 
                status: item.status
            });
        }
    })};

jsp

 <table>
        <tr>
            <td><label>Name:</label></td>
            <td>
    <input id="fName" type="text" data-ng-model="enteredValue" /> 
    <button data-ng-click='clickButton(enteredValue)'>Search</button>
            </td>
        </tr>
  </table>


 <table>
 <tr data-ng-repeat="result in results" >
 <td data-title="'ID'" >{{result.name}}</td>
 <td data-title="'Name'">{{result.status}}</td>
 <td data-title="'Status'">{{result.number}}</td>
 <td data-title="'Start Date'" >{{result.date}} </td>
 </tr>
 </table>

我已经能够使用then来成功填充下拉列表，如下所示。

 $http.get('http://localhost:8080/application/countries').then(function(cdata) 
        {
$scope.countryData = cdata.data;

})

如何启动此搜索？ 我这样做正确吗？ 我需要为此服务吗？

Answer 1

看起来您的服务器端函数已经能够处理查询并返回过滤后的结果，如果是这样，那么您需要做的只是在发送搜索结果时处理请求网址。 因此，您的clickButton函数应如下所示：

        $scope.clickButton = function(enteredValue){
        //you may want to change logic here if you got other parameter need to be handled
        var url = 'http://localhost:8080/application/names/find?firstname='+enteredValue+'&LastName&Address&Status=';
        $http.get(url).success(function(data){
        $scope.results = data;
             });
    }