md-data-table出错＆＃34;无法读取属性＆＃39;长度＆＃39;未定义＆＃34;

时间：2017-05-29 12:03:26

标签： angularjs

这是我第一个使用angularjs的项目。我使用md-data-table作为角度材料web应用程序。我安装了md-data-table，它开始要求lodash。所以我安装了lodash。那是我得到这个[错误] [1]。所以我想也许angular-lodash可能有所帮助，而且我得到另一个错误，说_.methods不是一个函数。我发现一些关于lodash的帖子不再支持某些功能了。但我似乎无法找到对我的案件有用的东西。我在这里缺少什么？

代码：

＆＃13;
＆＃13; 
var app = angular.module('app', [
    'ngMaterial',
    'ngMaterialSidemenu',
    'mdPickers',
    'ui.grid',
    'mdDataTable']);

app.controller('appCtrl', function ($scope, $mdDialog, $mdpTimePicker) {
    $scope.items = [1, 2, 3, 4, 5];
    $scope.selectedItem = $scope.items[0];
    $scope.getSelectedText = function () {
        if ($scope.selectedItem != undefined) {
            return 'You chose ' + $scope.selectedItem + '.';
        } else {
            return 'Choose an item.';
        }
    };

    $scope.selectedTime = $scope.selectedDate = new Date();
    $scope.message = 'Hello';

    // directive
    $scope.point = {
        pointId: '1001'
    };

    $scope.browser = function (ev) {
        var searchByColumns = [
            'Point ID',
            'Description'
        ];

        var pointList = [{
            pointId: '1001',
            description: 'point 1'
        }, {
            pointId: '1002',
            description: 'point 2'
        }, {
            pointId: '1003',
            description: 'point 3'
        }];

        $mdDialog.show({
            templateUrl: '/dialogs/browser/grid-browser.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            locals: {
                items: pointList,
                searchByColumns: searchByColumns
            },
            openFrom: '#searchBtn',
            clickOutsideToClose: true,
            controller: function ($scope, items, searchByColumns) {
                $scope.items = items;
                $scope.searchByColumns = searchByColumns;
                $scope.selectedColumn = $scope.searchByColumns[0];
                $scope.getSelectedText = function () {
                    return $scope.selectedColumn;
                };
            }
        })
            // .then(function (answer) {
            //     $scope.status = 'You said the information was "' + answer + '".';
            // }, function () {
            //     $scope.status = 'You cancelled the dialog.';
            // })
            ;
    };


    $scope.nutritionList = [{
        id: 601,
        name: 'Frozen joghurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        sodium: 87,
        calcium: '14%',
        iron: '1%'
    }, {
        id: 602,
        name: 'Ice cream sandwitch',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        sodium: 129,
        calcium: '84%',
        iron: '1%'
    }, {
        id: 603,
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 24,
        protein: 6.0,
        sodium: 337,
        calcium: '6%',
        iron: '7%'
    }];
});
＆＃13; 
<html lang="en">

<head>
    <link rel="stylesheet" href="/node_modules/angular-material/angular-material.css"></link>
    <link rel="stylesheet" href="/node_modules/angular-material-sidemenu/dist/angular-material-sidemenu.css"></link>
    <link rel="stylesheet" href="/node_modules/mdPickers/dist/mdPickers.css"></link>
    <link rel="stylesheet" href="/node_modules/angular-material-time-picker/dist/md-time-picker.css"></link>
    <link rel="stylesheet" href="/assets/md-data-table/md-data-table.min.css"></script>
    <link rel="stylesheet" href="/assets/css.css"></link>
    <link rel="stylesheet" href="/assets/icons.css"></link>
    <link rel="stylesheet" href="/assets/ui-grid/ui-grid.min.css"></link>
    <link rel="stylesheet" href="/main.css"></link>
</head>

<body ng-app="app" ng-controller="appCtrl" ng-cloak>
    <md-toolbar class="md-primary">
        <div class="md-toolbar-tools">
            <h2 class="md-flex">HTML 5</h2>
        </div>
    </md-toolbar>

    <md-content layout-padding layout="row">
        <md-sidemenu locked="false">
            <md-sidemenu-group>
                <md-sidemenu-content md-icon="home" md-heading="Master" md-arrow="true">
                    <md-sidemenu-button ng-href="#pointMaster">Point</md-sidemenu-button>
                    <md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
                    <md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
                </md-sidemenu-content>

                <md-sidemenu-content md-heading="Menu 2" md-arrow="true">
                    <md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
                    <md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
                    <md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
                </md-sidemenu-content>
            </md-sidemenu-group>

            <md-sidemenu-group>
                <md-divider></md-divider>

                <md-subheader class="md-no-sticky">Caption</md-subheader>
                <md-sidemenu-button href="#">Menu 4</md-sidemenu-button>
            </md-sidemenu-group>
        </md-sidemenu>

        <md-tabs md-dynamic-height md-border-bottom flex="75">
            <md-tab label="Tax">
                <form flex>
                    <div layout="row" layout-align="start center">
                        <input-button flex="50" md-margin required="false" label="Point ID" tableId="point.pointId" browse="browser()"></input-button>
                        <span style="width: 20px"></span>
                        <md-checkbox aria-label="Default" class="md-primary" layout-align="center center" flex>
                            Default
                        </md-checkbox>
                    </div>
                    <div layout="row">
                        <md-input-container>
                            <label>Items</label>
                            <md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
                                <md-optgroup label="items">
                                    <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
                                </md-optgroup>
                            </md-select>
                        </md-input-container>
                        <mdp-time-picker mdp-auto-switch="true" ng-model="selectedTime" message="message">
                        </mdp-time-picker>
                    </div>
                    <div layout="row" flex>
                        <md-button class="md-raised md-primary">Save</md-button>
                        <md-button class="md-raised md-warn">Delete</md-button>
                        <md-button class="md-raised md-primary" ng-disabled="true">Reset</md-button>
                    </div>
                    <div layout="row" flex>
                        <md-datepicker ng-model="selectedDate" md-placeholder="Enter date" layout-align="start center" md-open-on-focus>
                        </md-datepicker>
                    </div>
                </form>
            </md-tab>

            <md-tab label="Family" layout="column" flex>
                <mdt-table mdt-row="{'data': nutritionList, 'table-row-id-key': 'id',
                  'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron']}">
                    <mdt-header-row>
                        <mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
                        <mdt-column align-rule="right">Calories</mdt-column>
                        <mdt-column align-rule="right">Fat (g)</mdt-column>
                        <mdt-column align-rule="right">Carbs (g)</mdt-column>
                        <mdt-column align-rule="right">Protein (g)</mdt-column>
                        <mdt-column align-rule="right">Sodium (mg)</mdt-column>
                        <mdt-column align-rule="right">Calcium (%)</mdt-column>
                        <mdt-column align-rule="right">Iron (%)</mdt-column>
                    </mdt-header-row>

                    <mdt-custom-cell column-key="Dessert" ng-click="viewFats(value)">
                        <span ng-repeat="name in names">{{value}}</span>
                    </mdt-custom-cell>
                </mdt-table>
            </md-tab>
        </md-tabs>
    </md-content>
</body>

<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-messages/angular-messages.js"></script>
<script src="/node_modules/moment/moment.js"></script>
<script src="/node_modules/angular-moment/angular-moment.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/node_modules/angular-material-sidemenu/dist/angular-material-sidemenu.js"></script>
<script src="/node_modules/mdPickers/dist/mdPickers.js"></script>
<script src="/node_modules/angular-material-time-picker/dist/md-time-picker.js"></script>

<script src="/assets/lodash/lodash.min.js"></script>
<script src="/assets/md-data-table/md-data-table.min.js"></script>
<script src="/assets/md-data-table/md-data-table-templates.min.js"></script>

<script src="/assets/ui-grid/ui-grid.min.js"></script>
<script src="/assets/angular-material-icons.min.js"></script>

<script src="/app.js"></script>
<script src="/directives/input-button/input-button.js"></script>
<script src="/dialogs/browser/grid-browser.js"></script>

</html>
＆＃13;
＆＃13;
＆＃13;

PS：//i.stack.imgur.com/WmdiC.png

1 个答案:

答案 0 :(得分：0)

@Htet Aung，

您提供的代码段在html中没有有效的md-data-table标记，在注入md-data-table时也没有错误。为了您的信息，您使用的是专为ANGULAR（angular2）版本设计的“mdDataTable”。但是查看代码表明你需要Angularjs的md-data-table（版本1.x）。

不需要loadash库。正常来自cdnjs的md-data-table.js会在你的模块中注入依赖项'md.data.table'。 请找到以下内容： [AngularJs Material和Angularjs 1.x版本的MD数据表] 

  [1]: https://codepen.io/anon/pen/BjvLVJ?editors=1010
相关问题
最新问题