Question

我想基于这个模型（Material Design Lite）创建一个表：

https://getmdl.io/components/index.html#tables-section

在我的代码中，我有一个列表，我尝试使用ng-repeat以下列方式显示它：

                    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
                      <thead>
                        <tr>
                          <th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="admin in listAdmins">
                            <td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
                        </tr>
                      </tbody>
                    </table>

但结果与插图示例中的结果不同：

我们可以看到，左边没有复选框，我不明白为什么。

另外，如何制作一个表，我们可以直接在其上添加数据？

事实上，使用固定列表，它可以工作。但我的是由数据库中的请求生成的，其值可以更改。我的listadmin在开头是空的，它由一个身份验证过程完成。

Answer 1

您的代码工作正常。

<html ng-app="myApp">
  <head>
    <!-- Material Design Lite -->
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script>
      angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
        $scope.listAdmins = ['admin1', 'admin2', 'admin3'];
      }]);
    </script>
  </head>
  <body ng-controller="MainController as main">
       <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
                      <thead>
                        <tr>
                          <th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="admin in listAdmins">
                            <td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
                        </tr>

                      </tbody>
                    </table>     
  </body>
</html>

可能发生了一些错误？你能看到浏览器控制台。

带复选框和ng-repeat的表（角度JS）

1 个答案: