带有ui.bootstrap的Angularjs和jquery.datatable-需要使用循环显示json中的条目

时间:2018-11-11 01:33:19

标签: javascript angularjs json for-loop

我需要循环显示json的条目。 我是js和angular的新手,而且我不知道如何在以下代码的标记位置输入for。 我需要知道完成所有代码,这只是对一个较大项目的测试。

        <?php
        $estudent[]=array(
        "name" => "luis", 
        "age" => "10");
        $estudent[]=array(
        "name" => "maria", 
        "age" => "12");
         $objJson=json_encode($estudent);
        ?>
    //here is the js
    <script>
    var json=eval(<?php echo $objJson; ?>);
    //Angularjs and jquery.datatable with ui.bootstrap and ui.utils

    var app=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
    app.controller('validationCtrl',function($scope){

 $scope.data = [
            [ //i need to use a loop for show all the studens
                json[0].name,
                json[0].age,
                    ],
             [ //i need to use a loop for show all the studens
                json[1].name,
                json[1].age,
                   ],
        ]

    $scope.dataTableOpt = {
       //custom datatable options 
      // or load data through ajax call also
      "aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
      };
    });
    </script>

2 个答案:

答案 0 :(得分:0)

对于此循环,您可以使用:

$scope.data = [];
angular.forEach(json, (item) => {
  // here you can get item.age  and item.name
  $scope.data.push(item);
});

在此循环结束时,您的$scope.data中将有所有学生

答案 1 :(得分:0)

我认为您的JSON有效,请尝试更改JSON格式,类似于以下内容:

 $scope.data = [{
        "name": "json[0].name",
        "age": "json[0].age"
    },
    {
        "name": "json[1].name",
        "age": "json[1].age"
    }
]

然后您可以轻松console或显示它

angular.forEach($scope.data, function (value, index) {
   console.log($scope.data[index] + ' ' + index);
});

HTML

<ul ng-repeat="json in data">
      <li><b>Name: </b> <p>{{json.name}}</p> <b>Age: </b> <p>{{json.age}}</p></li>
</ul>

朋克:http://plnkr.co/edit/s6ix8aEDz0jR3UeXGL6M?p=preview