Angular table ng-repeat

Hy，Angular table ng-repeat

我在我的應用程序中創建了一個簡單使用表的指令。我正在努力獲得ng-repeat的工作。問題是我的指令會告訴表，它將從哪個控制器獲取ng-repeat的數據列表，這似乎不起作用，我可以使用另一個指令來創建一個ng-repeat，但我不能想要改變開發者可以使用角度指令的方式。

所以，如果任何人已經與這個問題掙扎，請分享你如何解決它。

這是標記。

<body ng-app="List"> 
<div my-table pl-emptytext="No data found!"> 
    <table> 
    <thead> 
     <tr> 
     <th pl-sort="Id"> Id </th> 
     <th pl-sort="Name"> Name </th> 
     <th pl-sort="Roles"> Roles </th> 
     <th pl-sort="Claims"> Claims </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr pl-obj="user"> 
     <td>{{user.Id}}</td> 
     <td>{{user.Name}}</td> 
     <td> 
      <span ng-repeat="role in user.Roles"> 
      {{role.RoleType}} 
      </span> 
     </td> 
     <td> 
      <span ng-repeat="claim in user.Claims"> 
      {{role.ClaimType}} 
      </span> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
</body>

這是指令myTable的

angular 
.module('List') 
.directive('myTable', [ 
    '$compile', 
    function($compile) { 
    return { 
     restriction: 'AE', 
     scope: { 
     plEmptytext: '@' 
     }, 
     transclude: true, 
     replace: true, 
     template: '<div class="container-fluid">' + 
     '<div class="row">' + 
     '<div class="col-lg-12">' + 
     '<div class="alert alert-warning" ng-cloak ng-show="ListIsEmpty">' + 
     '{{plEmptytext}}' + 
     '</div>' + 
     '<div ng-transclude></div>' + 
     '</div>' + 
     '</div>' + 
     '</div>', 
     link: function(scope, element) { 
     // Do something else, bind events, etc ... 

     var table = element.find('table'); 
     $compile(table)(scope); 
     } 
    }; 
    } 
]) 
.directive('table', [ 
    function() { 
    return { 
     link: function(scope, element, attrs) { 
     attrs.$addClass("table"); 
     attrs.$addClass("table-striped"); 
     } 
    }; 
    } 
]) 
.directive('thead', [ 
    function() { 
    return { 
     link: function(scope, element, attrs) { 
     } 
    }; 
    } 
]) 
.directive('th', [ 
    function() { 
    return { 
     link: function(scope, element, attrs) { 
     if (attrs.plSort) { 
      attrs.$set("ngClick", "resort('" + attrs.plSort + "')"); 
     } 
     } 
    }; 
    } 
]) 
.directive('tbody', [ 
    function() { 
    return { 
     link: function(scope, element, attrs) { 
     attrs.$set("ng-controller", "listCtrl"); 

     } 
    }; 
    } 
]) 
.directive('tr', [ 
    function() { 
    return { 
     link: function(scope, element, attrs) { 
     if (attrs.plObj) { 
      attrs.$set("ngRepeat", attrs.plObj + " in List"); 

     } 
     } 
    }; 
    } 
]);

這是listctrl的

angular.module('List', []) 
.controller('listCtrl', ['$scope', '$timeout', 
    function($scope, $timeout) { 
    $timeout(function() { 
     $scope.List = [{ 
     Id: '1', 
     Name: 'teste1', 
     Roles: [{ 
      Id: 1, 
      RoleType: '1' 
     }, { 
      Id: 2, 
      RoleType: '2' 
     }], 
     Claims: [{ 
      Id: 1, 
      CalimType: '1' 
     }, { 
      Id: 2, 
      ClaimType: '2' 
     }] 
     }, { 
     Id: '1', 
     Name: 'teste1', 
     Roles: [{ 
      Id: 2, 
      RoleType: '2' 
     }], 
     Claims: [{ 
      Id: 2, 
      ClaimType: '2' 
     }] 
     }]; 
    }, 1000) 
    } 
]);

問題是，當我嘗試撥打這個2 TD的NG-重複它dosen' t work

<td> 
    <span ng-repeat="role in user.Roles"> 
    {{role.RoleType}} 
    </span> 
</td> 
<td> 
    <span ng-repeat="claim in user.Claims"> 
    {{role.ClaimType}} 
    </span> 
</td>

任何人都可以指出我的問題的方向？已經從不同的人看待不同的事物和不同的解決方案，但似乎沒有人面臨我的問題。

最佳，

所有的

Plunker

來源

2016-01-23 Jose Rocha

首先，你pl-obj指令是從字面上只是一個ng-repeat。所以使用<tr ng-repeat="user in List">。

其次，你的控制器似乎沒有連接起來。你試圖用一個奇怪的指令來掛鉤它，但是你可能會用Angular不理解的方式（attrs對象的屬性是camelCased，而不是連字符）。只需在table元素上使用ng-controller屬性：<table ng-controller="listCtrl">。

一旦您以這種方式使用更多標準的Angular，我預計您的問題將更容易排除故障。

編輯：這是一個與我推薦的修改（和一些更正的錯別字）的修士。 https://plnkr.co/edit/iEEtBycevB3Wh6eHFEAI?p=preview。似乎現在工作正常。

編輯2：

function() { 
    return { 
    controller: 'listCtrl', 
    ... 
    }; 
}

來源

2016-01-23 18:05:13

您所做的更改：如果您想使用相同的控制器對所有<tbody>（我不建議這樣做，但它的東西，你可以做），在你的指導使用使用ng-repeat而不是pl-obj我可以接受，但是在元素表上使用ng-controller的改變並不是我所需要的。將會有幾個控制器連接到主體上的其他標題上的其他控制器，以控制將附加到該表的其他元素。不僅僅是把所有的ng控制器放在我想要的地方，我想隱藏所有的表格標記，因爲它們對於我可以在我的項目中引入的所有表格都是一樣的。但是，我會給你和給我做過這個問題的用戶一樣的答案。 +1 –

這很有道理。希望我的回答能讓你更接近你想要做的事情。如果我是你，我會使用自包含的獨立範圍指令而不是嘗試在事實之後添加控制器的stopgap指令（指令對象可以包含「controller」屬性以及您正在使用的「link」屬性）。這是做這件事的方式。 –

你是對的請更新你的答案'tbody'使用'return {controller：'listCtrl'，....}'所以我可以將它標記爲正確 –

Angular table ng-repeat

回答

相關問題