个人中心
gpt4 book ai didi

javascript - 如何使用AngularJS按顺序获取json数据

转载 作者：行者123 更新时间：2023-12-03 06:15:35 24 4
gpt4 key购买 nike

我是AngularJS新手，我想建立一个电子商务网站，就我而言，我想获取食谱的所有JSON数据并在网格框上显示一些详细信息，就像这样this is what I want,please click here to see what's here但我这里有一些问题，每次页面以不同的顺序显示每个菜谱(似乎是随机顺序)，这肯定会导致页面在菜谱 block 中显示不同的菜谱(我只需要在此处显示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();
});

最佳答案

在显示数据时使用 Angular 的 orderBy 过滤器。

https://docs.angularjs.org/api/ng/filter/orderBy

关于javascript - 如何使用AngularJS按顺序获取json数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39121670/

24 4 0
文章推荐： android - FileNotFound Jacoco/Gradle
文章推荐： tortoisesvn - 我应该如何使用TortoiseSVN合并工具(TortoiseMerge)？
文章推荐： asp.net-mvc - 需要 MVC 模型验证不适用于所有领域
文章推荐： java - YouTube Player崩溃(java.lang.NullPointerException，空对象引用)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com