javascript - Angular 表 ng-repeat

标签 javascript angularjs

我试图制作一张 Angular table 。但不把结果放出来,我不知道为什么。如果我对结果进行 console.log 看起来不错,但在打印时,表中的结果不会显示任何内容。

<!DOCTYPE html>
<html lang="en" ng-app="dashboard">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>LiftEye</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="js/dashboard.js"></script>
    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- Timeline CSS -->
    <link href="../dist/css/timeline.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->

    <!-- Custom Fonts -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body ng-controller="mainController">

<div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">



            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li ng-click="modal()"><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>

                                    <li class="divider"></li>
                    <li ng-click="logout()" ><a ><i  class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div align="center"> <img src="img/Logo_LiftEye.jpg" align="center"> </div>

                        <!-- /input-group -->
                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Operación</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Informes<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="flot.html">Facturas</a>
                            </li>
                            <li>
                                <a href="morris.html">Gestión</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="tables.html"><i class="fa fa-table fa-fw"></i> LiftEye<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="flot.html">Tarifas</a>
                            </li>
                            <li>
                                <a href="morris.html">Cobros</a>
                            </li>
                            <li>
                                <a href="morris.html">VBP</a>
                            </li>
                            <li>
                                <a href="morris.html">Logs</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Grupos<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="flot.html">Programaciones</a>
                            </li>
                            <li>
                                <a href="morris.html">Registro Configuraciones</a>
                            </li>


                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-wrench fa-fw"></i> Configuración<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="flot.html">Cconfiguración Alertas/Eventos</a>
                            </li>
                            <li>
                                <a href="morris.html">Clientes</a>
                            </li>
                            <li>
                                <a href="morris.html">Alta tarjetas/Instalaciones</a>
                            </li>

                        </ul>
                        <!-- /.nav-second-level -->
                    </li>

                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper" >
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Operación</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row" >
            <div class="col-lg-8 col-md-8">
                <div class="panel " STYLE="background-color: #eaeaea">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                            </div>
                            <div class="col-xs-9 text-right">


                            </div>
                        </div>
                        <div class="input-group custom-search-form">
                            <input ng-model="searchText" type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!-- /.row -->

        <!-- /.panel -->
        <div class="panel panel-default" ng-controller="mainController">
            <div class="panel-heading">

            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="table">
                            <table class="table table-bordered table-hover table-striped">
                                <tr class="info text-center">

                                    <th>ICC</th>
                                    <th>Estado</th>
                                    <th>Dirección</th>
                                    <th>Ciudad</th>
                                    <th>Código Postal</th>
                                    <th>Comentario</th>

                                </tr>


                                <tr class=" text-center" ng-repeat="object in objects | filter:searchText" >
                                    <td>{{object.icc}}</td>
                                    <td>{{object.ActivationStatus}}</td>
                                    <td>{{object.siteaddress}}</td>
                                    <td>{{object.city}}</td>
                                    <td>{{object.sitezip}}</td>
                                    <td>{{object.comments}}</td>





                                </tr>






                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.col-lg-4 (nested) -->

                    <!-- /.col-lg-8 (nested) -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.panel-body -->
        </div>

        <!-- /.panel -->

        <!-- /.col-lg-4 -->
    </div>
    <!-- /.row -->
</div>
<!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>

</body>

</html>

这是我的js

angular.module('dashboard',[])
function mainController($scope, $http, $filter) {
    $scope.objects=[];
    var URL = "http://localhost:81/api/auth/logout";
    var URLOperation ="http://localhost:81/api/sites";


    $http.get(URLOperation, $scope)
        .success(function(data) {

            var groups = data;
            angular.forEach(groups, function(group) {
                var group2 = group;
            angular.forEach(group2.sites, function(group3){
                 //console.log(group3);
                //console.log(group3.icc);
                //console.log($scope.objects);

                $scope.objects = group3;
                //console.log($scope.objects);

            })


            });

        })
        .error(function(data) {

            window.alert('Something Wrong...');
        });}

谢谢

最佳答案

您没有将项目附加到数组 $scope.objects,您只是将 $scope.objects 数组替换为 group3 的值,您应该替换:

$scope.objects = group3;

与:

$scope.objects.push(group3);

关于javascript - Angular 表 ng-repeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30639748/

相关文章:

javascript - XMLHttpRequest、FireFox 扩展和错误代码 '1012'(访问被拒绝)

javascript - 根据字符串对 float 进行排序?

javascript - 为 "Video"标签自定义视频控件

javascript - AngularJS ng-show 与 map 一起使用时不会触发

javascript - 当 2 个数组更新时,angularjs 调用 watch

JavaScript 时间跨度控制

javascript - 如何在 d3.js 中重置 Zoom?

javascript - 如何将事件冒泡到最顶层的父 React 样式?

javascript - Fabricjs:在拖动时显示水平和垂直位置线

javascript - Angular 应用程序保护和用户身份验证