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

我试图通过我的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);

var-app=angular.module（'restaurant'，[]）；
函数restaurantcontroller（$scope，$http）{
//创建分配给BTN搜索的单击事件（ng click）的函数。
$scope.search=函数（searchName）{
var rName=$scope.searchName；
var restName=$（“#txtRestaurant”）.val（）；
var=新对象（）；
var strURL=”http://localhost:56475/api/Restaurants/GetByName/“+restName；
//范围
var valid=true；
var字段=$scope.searchName；
如果（字段==未定义）{
警报（“请输入有效名称”）；
有效=错误；
}否则{
//.restaurantName必须与我的web服务方法中的参数匹配
restaurant.name=rName；
restaurant=JSON.stringify（restaurant）；
//通过创建具有必要属性的JavaScript对象来配置请求
//和请求的值。
var请求={
方法：“获取”，
网址：strURL，
标头：{//包含标头类型作为属性的对象。
“内容类型”：“应用程序/json；字符集=utf-8”，
},
数据：输入参数作为JSON对象发送。
};
//设置并发送发送搜索词的AJAX请求
//由Web API用于查找团队。
$http（请求）。
然后（函数（响应）{//success回调函数
控制台日志（响应）；
$scope.restaurants=response.data；
var=response.data；
$。每个（餐厅，功能（索引，餐厅）{
$（“searchResults”）.append（“”）.concat（“餐厅ID:”，restaurantid，

餐厅名称：”，restaurants.RestName，“
位置：”，restaurants.RestAddr，
“
星级评定：”，餐馆。星级评定，
价格评定：”，餐馆。价格评定，

餐厅：
美食：“，餐厅。美食，
“
平均评级：”，restaurants.AvgRating，“
”）；
});
},
函数（响应）{//错误回调函数
警报（“错误：+响应.数据”）；
});
}
};
}
应用控制器（“餐厅控制器”，餐厅控制器）；

为响应定义范围变量，然后在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页面中添加“ng repeat”以循环结果。然后，您将根据搜索关键字获得所有结果。

因此，您希望循环js文件中的所有数据并附加数据

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

var=response.data；
$。每个（餐厅，功能（索引，餐厅）{
$（“#搜索结果”）.append（”.concat（“餐厅ID:”，
RestaurantID，“
餐厅名称：”，restaurants.RestName，“

地点：“，餐厅。餐厅地址，”
星级：“，
餐厅。星级，“
价格评级：”，餐厅。价格评级，“

餐厅：

菜肴：
，餐馆。烹饪，“
平均评级：”，餐馆。平均评级，”
（”）；
});

添加并确认您的html文件有一个ID为“searchResults”的标记。

---

希望这能解决您的问题。

尝试使用angular.forEach（餐厅，函数（餐厅，索引）{}）；执行循环。为什么

$（“searchResults”）。附加
和
$。如果使用angular，则每个
。请参阅
ng repeat
我不想使用ng repeat。我想在ajax回调函数中动态填充数据。