Question

我找到了第一个名字后显示JSON数据的链接。

colorAccent

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

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

如果我用Sue替换f_name，我会得到这个JSON响应。

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

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

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

JSP

 $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
            });
        }
    })};

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

 <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>

如何启动此搜索？我这样做是对的吗？我必须为此服务吗？

Answer 1

看起来您的服务器端功能已经能够处理查询并返回过滤结果，如果是这样的话，您需要做的只是在发送搜索结果时处理请求URL。所以，你的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;
             });
    }

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

1 个答案: