文章/答案/技术大牛

发布

社区首页 >问答首页 >Lumx数据表示例不起作用

问Lumx数据表示例不起作用
EN

Stack Overflow用户

提问于 2016-12-16 06:28:01

回答 1查看 268关注 0票数 1

我刚开始尝试我们的lumX。我正在尝试使用这个链接中的datatable。

但我认为控制器数据不是绑定的。我是新来的安古拉杰，所以任何帮助都将不胜感激。

我附上了输出的截图。

以下是守则：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>LumX</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- Head -->
    <link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
    <link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">


<div class="toolbar has-divider has-divider--dark">
    <div class="toolbar__label pl">
        <span>{{ vm.selectedRows.length || 0 }} selected item(s)</span>
    </div>
    <div class="toolbar__right">
        <lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length === 1">
            <i class="mdi mdi-pencil"></i>
        </lx-button>

        <lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length >= 1">
            <i class="mdi mdi-delete"></i>
        </lx-button>
    </div>
</div>

<lx-data-table id="lolo" lx-selectable="true" lx-thead="vm.dataTableThead" lx-tbody="vm.dataTableTbody"></lx-data-table>


<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
<script src="app.js"></script>
<script src="datatable.js"></script>
</body>
</html>

app.js

(function()
{
    'use strict';
    angular
        .module('lumxdemo', [
        'lumx',
        'Controllers'   
    ]);

    angular.module('Controllers', []);

})();

datatable.js

(function()
{
    'use strict';
    angular
        .module('Controllers')
        .controller('DemoDataTableController', DemoDataTableController);

    DemoDataTableController.$inject = ['$filter', '$scope'];

    function DemoDataTableController($filter, $scope)
    {
        var vm = this;

        vm.dataTableThead = [
        {
            name: 'dessert',
            label: 'Dessert',
            sortable: true
        },
        {
            name: 'calories',
            label: 'Calories',
            sortable: true
        },
        {
            name: 'fat',
            label: 'Fat (g)',
            sortable: true,
            sort: 'asc'
        },
        {
            name: 'comments',
            label: 'Comments',
            icon: 'comment-text',
            sortable: false
        }];
        vm.advancedDataTableThead = angular.copy(vm.dataTableThead);
        vm.advancedDataTableThead.unshift(
        {
            name: 'image',
            format: function(row)
            {
                return '<img src="' + row.image + '" width="40" height="40" class="img-round">';
            }
        });
        vm.dataTableTbody = [
        {
            id: 1,
            image: '/images/placeholder/1-square.jpg',
            dessert: 'Frozen yogurt',
            calories: 159,
            fat: 6.0,
            comments: 'Lorem ipsum'
        },
        {
            id: 2,
            image: '/images/placeholder/2-square.jpg',
            dessert: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            comments: 'Lorem ipsum',
            lxDataTableDisabled: true
        },
        {
            id: 3,
            image: '/images/placeholder/3-square.jpg',
            dessert: 'Eclair',
            calories: 262,
            fat: 16.0,
            comments: 'Lorem ipsum'
        }];

        $scope.$on('lx-data-table__select', updateActions);
        $scope.$on('lx-data-table__unselect', updateActions);
        $scope.$on('lx-data-table__sort', updateSort);

        ////////////

        function updateActions(_event, _selectedRows)
        {
            vm.selectedRows = _selectedRows;
        }

        function updateSort(_event, _column)
        {
            vm.dataTableTbody = $filter('orderBy')(vm.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false);
        }
    }
})();

lumx

angularjs

datatable

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-11 20:18:37

看起来你只是在你的例子中缺少一个ng控制器，这样数据就可以正确绑定了。

例如，如果将它添加到<body>元素中，那么它应该会像预期的那样工作。

因此，改变：

<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">

至：

<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }" ng-controller="DemoDataTableController as vm">

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41178478

复制

相似问题

问Lumx数据表示例不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Lumx数据表示例不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Lumx数据表示例不起作用
EN