首页 文章

如何使用AngularJS动态显示来自AJAX调用的所有数据?

提问于
浏览
0

我正在尝试通过餐馆名称搜索我的Web API,然后显示与该名称匹配的所有结果 .

我必须使用AngularJS . 我可以让它手动显示但我如何让它动态显示所有数据而不仅仅是一个?

我知道我必须使用$ .each()来获取每个数据结果,但它只是不起作用 .

var app = angular.module('restaurant', []);

function RestaurantsController($scope, $http) {

    // Create a function assigned to btnSearch's click event (ng-click).
    $scope.search = function (searchName) {

        var rName = $scope.searchName;
        var restName = $("#txtRestaurant").val();
        var restaurant = new Object();

        var strURL = "http://localhost:56475/api/Restaurants/GetByName/" + restName;

        //scope this
        var valid = true;
        var field = $scope.searchName;
        if (field == undefined) {
            alert("Please enter a valid name.");
            valid = false;
        } else {

            //.restaurantName has to match the parameter in my web service method
            restaurant.name = rName;
            restaurant = JSON.stringify(restaurant);

            // Configure the request by creating a JavaScript object with the necessary properties
            // and values for the request.
            var request = {
                method: "Get",
                url: strURL,
                headers: {  // object containing header type as properties.
                    'Content-Type': "application/json; charset=utf-8",
                },
                data: restaurant // input parameter sent as JSON object.
            };

            // Setup and send an AJAX request that sends a search term 
            // used by the Web API to find a team.
            $http(request).
                then(function (response) {  // success callback function
                    console.log(response);
                    $scope.restaurants = response.data;

                    var restaurants = response.data;

                    $.each(restaurants, function (index, restaurants) {
                        $("searchResults").append("<p>".concat("Restaurant ID: ", restaRestaurantID,
                            "<br>Restaurant Name: ", restaurants.RestName, "<br>Location: ", restaurants.RestAddr,
                            "<br>Star Rating: ", restaurants.StarRating, "<br>Price Rating: ", restaurants.PriceRating,
                            "<br>Restaurant : <br> <img src=", restaurants.ImageURL, " /><br>Cuisine: ", restaurants.Cuisine,
                            "<br>Average Rating: ", restaurants.AvgRating, "</p>"));
                    });
                },
                    function (response) {   // error callback function
                        alert("ERROR: " + response.data);
                    });
        }
    };
}

app.controller('RestaurantsController', RestaurantsController);

1 回答

  • 0

    为响应定义范围变量,然后在html中添加ng-repeat .

    Eg: ` var request = {
                method: "Get",
                url: strURL,
                headers: {  // object containing header type as properties.
                    'Content-Type': "application/json; charset=utf-8",
                },
                data: restaurant // input parameter sent as JSON object.
            };
    
            // Setup and send an AJAX request that sends a search term 
            // used by the Web API to find a team.
            $http(request).
                then(function (response) {  // success callback function
                    console.log(response);
                    $scope.restaurants = response.data;
    
                    //var restaurants = response.data;
                    $scope.searchResult = response.data;
    
                },
                    function (response) {   // error callback function
                        alert("ERROR: " + response.data);
                    });`
    

    在您的HTML PAGE中添加“ng-repeat”以循环结果 . 然后,您将获得基于搜索关键字的所有结果 .

相关问题