Question

我刚刚开始尝试我们的lumX。我正在尝试使用此link中的数据表。

但我认为控制器数据没有约束力。我是AngularJs的新手，所以任何帮助都会受到赞赏。

我附上了输出屏幕截图。

以下是代码：

的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);
        }
    }
})();

Answer 1

您的示例中似乎缺少ng-controller，因此数据可以正确绑定。

例如，如果将其添加到<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">

Lumx数据表示例不起作用

1 个答案: