我是新来的AngularJS，我想建立一个电子商务网站，就我而言，我想获取所有JSON食谱数据并在网格框中显示一些详细信息，就像我想要的那样，请单击此处查看此处的内容，但是我这里有一些问题，每次页面以不同的顺序显示每个食谱（似乎是随机顺序）时，这肯定会导致页面在食谱块中显示不同的食谱（我只需要在这里显示8个食谱），所以我猜我JavaScript部分是个大问题，但我仍然不知道如何按顺序整理这些食谱。
这是我的html文件。
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="H:/job/Xmapp/htdocs/AngularJs/recipesController3.js"></script>
<link rel="stylesheet" href="H:/job/Xmapp/htdocs/AngularJs/imgStyle.css">
</head>
<body>
<div ng-app="myApp" ng-controller="mainController" class="center">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3" ng-repeat="recipes in listOfrecipes |limitTo:8 track by $index">
<div class="panel panel-default">
<div class="panel-body">
<div class="name"><h4> {{ recipes.Recipe.name|uppercase}}</h4>
<p>4 Serves</p>
<h4>MAIN INGREDIENT :</h4>
<table class="table_style">
<tr>
<td>- {{recipes.IngredientMapping[0].Ingredient.name}}</td>
<td>- {{recipes.IngredientMapping[1].Ingredient.name}}</td>
</tr>
<tr>
<td>- {{recipes.IngredientMapping[2].Ingredient.name}}</td>
<td>- {{recipes.IngredientMapping[3].Ingredient.name}}</td>
</tr>
</table>
<br>
<div>
{{recipes.Recipe.directions|limitTo:100}}
<a href="/" class="dotStyle"><strong>....</strong></a>
</div>
<div>
<img class="img" ng-src="http://164.132.196.117/chop_dev/recipe/files/image/attachment/{{recipes.Image[0].id}}/{{recipes.Image[0].attachment}}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</body>
</html>
这是我的Controller.js
var myApp = angular.module('myApp', []);
myApp.controller('mainController', function ($scope, $http) {
console.log('dddddd');
// delete $http.defaults.headers.common['X-Requested-With'];
$scope.listOfRecipe = null;
$scope.listOfIngredient = Array();
$scope.listOfrecipes = Array();
var url = "http://164.132.196.117/chop_dev/recipe/recipes.json";
var url2 = "http://164.132.196.117/chop_dev/recipe/recipes/view/";
function first_call() {
return $http({
method: 'GET',
url: url
}).then(function (response) {
var wait_it = false;
$scope.listOfRecipe = response.data.recipes;
//to get how many recipes in total in json file
console.log($scope.listOfRecipe);
var recipeLength = $scope.listOfRecipe.length;
$scope.listOfIngredient = new Array(recipeLength);
for (var j = 0; j < 100; j++) {
$scope.listOfIngredient[j] = Array();
}
console.log(recipeLength);
for (var i = 0; i < recipeLength; i++) {
//access to different individual recipe with recipe id
another_call($scope.listOfRecipe[i].Recipe.id);
}
});
}
function another_call(Recipeid) {
$http.post(url2 + Recipeid + ".json", null).then(function (response2) {
var one_recipe = response2.data.recipe
$scope.listOfrecipes.push(one_recipe);
});
console.log($scope.listOfrecipes);
}
first_call();
});
就像其他人所说的那样，使用过滤器可能是最好的选择。但是，如果您坚持要订购http请求，请将其用作another_call函数
function another_call(Recipeid, others)
{
$http.post(url2+ Recipeid +".json", null).then(function (response2) {
var one_recipe=response2.data.recipe
$scope.listOfrecipes.push(one_recipe);
var next = others.pop();
if (next != null) another_call(next.Recipe.id, others);
console.log($scope.listOfrecipes);
});
}
在first_call的then函数中，而不是通过循环$scope.listOfRecipe，请使用以下代码：
$scope.listOfRecipe = $scope.listOfRecipe.reverse();
if ($scope.listOfRecipe.length > 0) {
another_call($scope.listOfRecipe.pop().Recipe.Id, $scope.listOfRecipe);
}
它应该在promise决议中递归，其中$ scope.listOfRecipe仍然具有值。那应该让您按顺序发出http请求。
注意：我尚未测试代码。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句