Question

我想要的是首先我想通过循环显示数组镜像的名称。接下来的事情是我要显示数组子元素。在$ scope.result中我们将获取所有json数据。在$ scope.result.data.root中我们将得到虔诚的信息

app.js

 $scope.templeEn = 'js/templeEnglish.js';

             $scope.loadtempleEn= function (file) {
                $http.get(file)
                .then(function (result) {
                    $scope.result=result;
                     console.log( $scope.result);
                    console.log($scope.result.data.root);



                })
             }


        $scope.loadtempleEn($scope.templeEn);

Answer 1

根据我的理解，你想知道如何循环通过div来显示名称和子组。

你可以这样做..

<div ng-repeat='result in results.root'>
    <div ng-repeat='temple in result.temples'>
        Temples Name {{temple.name}} 
        <div ng-repeat='sub in temple.subdieties'>
            {{sub}}
        </div>
   </div>
</div>

Answer 2

angular.module("stack", [])
    .controller("move", function($scope) {
        // this.apps = features;
        $scope.result = {
            "root": [{
                "diety": "Krishna",
                "image": "krishna.png",
                "info": "Information regarding Krishna",
                "details": "Details of Krishna",
                "rounds": "4 Times",
                "temples": [{
                    "name": "Guruvayoor",
                    "address": "Guruvayoor, Thrissur",
                    "phone": "3333444",
                    "subdieties": ["Ganapati", "Sasthaavu", "Devi"]
                }, {
                    "name": "Thruvaoor",
                    "address": "Thuravoor, Alapuzha",
                    "phone": "31249652",
                    "subdieties": ["Nagarajavu", "Ganapati", "Sasthaavu", "Devi"]
                }, {
                    "name": "Ambalapuzha",
                    "address": "Ambalapuzha, Alapuzha",
                    "phone": "2255321",
                    "subdieties": ["Ganapati"]
                }]
            }, {
                "diety": "Paramasivan",
                "image": "siva.png",
                "info": "Information regarding Paramasivan",
                "details": "Details of Paramasivan",
                "rounds": "3 Times",
                "temples": [{
                    "name": "Mammiyoor",
                    "address": "Mammiyoor, Thrissur",
                    "phone": "2222444",
                    "subdieties": ["Mahavishnu", "Ganapati", "Subramanian", "Sasthaavu", "Devi"]
                }, {
                    "name": "Velorvattom",
                    "address": "Cherthala, Alapuzha",
                    "phone": "21299652",
                    "subdieties": ["Nagarajavu", "Ganapati", "Sasthaavu", "Devi", "Mahavishnu", "Yakshi", "Brahmarakshasu"]
                }]
            }]
        }
        $scope.array = [];
        $scope.result.root.forEach(function(each) {
            console.log("each ", each.temples);
            each.temples.forEach(function(e) {
                // console.log("e ", e);
                $scope.array.push({ "name": e.name, "subdieties": e.subdieties });
            })

        })
        console.log("array ", $scope.array);
    });

<!DOCTYPE html>
<html ng-app="stack">

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- // <script type="text/javascript" src="loadingoverlay.js"></script> -->
    <!--  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <!-- // <script type="text/javascript" src="controller.js"></script> -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body ng-controller="move">
    <div ng-repeat="val in array">
        <p style="background-color:red">{{val.name}}</p>
        <div ng-repeat="value in val.subdieties">
            <p>{{value}}</p>
        </div>
    </div>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

你需要这个吗？ @Sherin

Answer 3

参见我在这里准备的jsfiddle

jsfiddle

angular.forEach(result.root, function(value) { angular.forEach(value.temples, function(temple) { $scope.temples.push(temple); angular.forEach(temple.subdieties, function(subdiety) { $scope.subdieties.push(subdiety); }); }); });

显示json数组的名称？

3 个答案: