带有复选框和 ng-repeat 的表格（角度 JS）答案

【问题标题】：Table with checkboxes and ng-repeat (angular JS)带有复选框和 ng-repeat 的表格（角度 JS）
【发布时间】：2017-05-26 11:47:25
【问题描述】：

我想根据这个模型（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一开始是空的，是通过一个认证过程完成的。

【问题讨论】：

你可以使用 angular [ui-grid.info]

标签： javascript angularjs html-table material-design

【解决方案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，它不起作用。我的控制台没有问题。
angular编译后得到什么html？可能结果 html 有一些损坏的标签？
我在此主题上发布的屏幕。编译node/angular后获取。
其实我去掉ng-repeat是没有问题的。但事实是我需要它来打印我的数据并对其进行操作！
我看到的截图。我谈到了页面上的 html 标签（例如，开发控制台 Chrome 浏览器中的选项卡“元素”）。可能是标签编译不正确。