daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 519 forks source link

Error: ngModel is not defined. #478

Closed sinhpn92 closed 8 years ago

sinhpn92 commented 8 years ago

I have an error when use table. My import:

<link rel="stylesheet" href="css/modules/angular-material.min.css">
<script src="js/modules/angular.min.js"></script>
<script src="js/modules/angular-animate.min.js"></script>
<script src="js/modules/angular-aria.min.js"></script>
<script src="js/modules/angular-messages.min.js"></script>
<script src="js/modules/angular-material.min.js"></script>
<script src="js/app.js"></script>

<link rel="stylesheet" href="css/modules/md-data-table.min.css">
<script src="js/modules/md-data-table.min.js"></script>

My table:

<md-table-container>
    <table md-table md-row-select multiple ng-model="itemSelected">
        <thead md-head>
            <tr md-row>
                <th md-column><span class="table-head">Name</span></th>
                <th md-column><span class="table-head">Date From</span></th>
                <th md-column><span class="table-head">Date To</span></th>
                <th md-column><span class="table-head">Scope</span></th>
                <th md-column><span class="table-head">Target</span></th>
                <th md-column><span class="table-head">Prestige</span></th>
                <th md-column><span class="table-head">User Created</span></th>
                <th md-column><span class="table-head">Status</span></th>
                <th md-column><span class="table-head">Created Time</span></th>
                <th md-column><span class="table-head">Actions</span></th>
            </tr>
        </thead>
        <tbody md-body>
            <tr md-row md-select="itemSelected" md-select-id="name" md-auto-select ng-repeat="item in data.pageItems">
                <td md-cell>{{item.name}}</td>
                <td md-cell>{{item.dateFrom}}</td>
                <td md-cell>{{item.dateTo}}</td>
                <td md-cell>{{item.scope}}</td>
                <td md-cell>{{item.target}}</td>
                <td md-cell>{{item.prestige}}</td>
                <td md-cell>{{item.userCreated}}</td>
                <td md-cell>{{item.status}}</td>
                <td md-cell>{{item.createdTime}}</td>
                <td md-cell>Actions</td>
            </tr>
        </tbody>
    </table>
</md-table-container> 
<md-table-pagination md-limit="15" md-page="1" md-total="{{data.totalItems}}" md-page-select="true" md-boundary-links="true" md-on-paginate="logPagination"></md-table-pagination>

My import module js:

var module = angular.module('my-app', [ 'ngMaterial', 'md.data.table' ]);

My table is working. But, i receive an error in console browser:

md-data-table.min.js:1 Row selection: ngModel is not defined.j @ md-data-table.min.js:1(anonymous function) @ md-data-table.min.js:1$digest @ angular.min.js:143$apply @ angular.min.js:146(anonymous function) @ angular.min.js:20invoke @ angular.min.js:41c @ angular.min.js:20Bc @ angular.min.js:21fe @ angular.min.js:20(anonymous function) @ angular.min.js:317b @ angular.min.js:189Sf @ angular.min.js:37d @ angular.min.js:37
app.js:36

Please review and feed back for me soon this my error. Thanks

mmumshad commented 8 years ago

Can you try defining itemSelected as a blank array in your controller like this:

$scope.itemSelected = []
sinhpn92 commented 8 years ago

THanks. It works