2017-05-26 144 views
0

我希望做一个表,基于此模型(材料设计精简版):表复选框和NG-重复(角JS)

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

在我的代码,我有一个列表,我尝试以显示它,以下面的方式,用NG-重复:

    <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>  

但结果并不比图中例子一样:Admin list

正如我们所看到的,左侧没有复选框,我不明白为什么。

另外,如何制作一个表格,我们可以在其中直接添加数据呢?

事实上,与固定列表,它的工作原理。但是,我是通过数据库中的请求生成的,其值可以更改。我的listadmin在开始时是空的,并且通过验证过程完成。

+0

您可以使用角度[ui-grid.info] – AMahajan

回答

0

您的代码正常工作。

<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> 

可能会发生一些错误?你能看到浏览器控制台吗?

+0

它的工作原理,当我在模型中的例子,但与ng-repeat,它不起作用。 我在我的控制台没有问题。 –

+0

在编译角度后得到了什么html?可能是结果html有一些损坏的标签? –

+0

我在这个主题上发布的屏幕。节点/角度编译后获得。 –