许多html中的显示数据使用angular不起作用

时间:2017-05-13 10:40:54

标签: javascript html angularjs jhipster

我想以HTML格式显示数据。第一个HTML disc-log.html看起来像:

<div>
    <h2>Discs</h2>
    <jhi-alert></jhi-alert>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-4 no-padding-left">
                <!--<button class="btn btn-primary" ui-sref="disc.new" >-->
                    <!--<span class="glyphicon glyphicon-plus"></span>-->
                    <!--<span >-->
                        <!--Create new Disc-->
                    <!--</span>-->
                <!--</button>-->
            </div>
        </div>
    </div>
    <br/>
    <div class="table-responsive">
        <table class="jh-table table table-striped">
            <thead>
                <tr>
                    <!--<th><span>ID</span></th>-->
                    <th><span>Name</span></th>
                    <th><span>Connection</span></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="disc in vm.discs track by disc.id">
                    <!--<td><a ui-sref="disc-detail({id:disc.id})">{{disc.id}}</a></td>-->
                    <td>{{disc.name}}</td>
                    <td>
                        <a ui-sref="connection-detail({id:disc.connection.id})">{{disc.connection.userHost}}</a>
                    </td>
                    <td class="text-right">
                        <div class="btn-group flex-btn-group-container">
                            <button type="submit"
                                    ui-sref="disc-detail({id:disc.id})"
                                    class="btn btn-info btn-sm">
                                <span class="glyphicon glyphicon-eye-open"></span>
                                <span class="hidden-sm-down"></span>
                            </button>
                            <!--<button type="submit"-->
                                    <!--ui-sref="disc.edit({id:disc.id})"-->
                                    <!--class="btn btn-primary btn-sm">-->
                                <!--<span class="glyphicon glyphicon-pencil"></span>-->
                                <!--<span class="hidden-sm-down"></span>-->
                            <!--</button>-->
                            <button type="submit"
                                    ui-sref="disc.delete({id:disc.id})"
                                    class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-remove-circle"></span>
                                <span class="hidden-sm-down"></span>
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

打开此网站后,将显示所有数据。但是当我将表复制到另一个文件时,表格为空。为什么?我应该在控制器或服务中添加内容吗?

光盘日志控制器:

(function() {
    'use strict';

    angular
        .module('deviceManagerApp')
        .controller('DiscLogController', DiscLogController);

    DiscLogController.$inject = ['$scope', '$state', 'DiscLog'];

    function DiscLogController ($scope, $state, DiscLog) {
        var vm = this;

        vm.discLogs = [];

        loadAll();

        function loadAll() {
            DiscLog.query(function(result) {
                vm.discLogs = result;
                vm.searchQuery = null;
            });
        }
    }
})();

Github存储库: https://github.com/Ice94/DeviceManager

1 个答案:

答案 0 :(得分:-1)

在控制器中,您要在 discLogs 变量vm.discLogs = result;中添加结果,在html中,您在ng-repeat <tr ng-repeat="disc in vm.discs track by disc.id">中使用光盘变量

这就是为什么它不显示任何东西。尝试使用相同的变量。

注意: "yourControllerName as vm"应该在您的ng-controller属性中,如果使用路由器,则应该在您的路由中为controllerAs: 'vm'