使用AngularJS的表格中的可擴展內容

我一直在關注Egghead上的AngularJS教程。事情很順利，直到我決定嘗試合併一些概念。使用AngularJS的表格中的可擴展內容

我的main.js位於here，由於文件大小的事實。

而且這裏是我的index.html：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="utf-8"> 
    <title>Egghead Videos</title> 
    <link rel="stylesheet" href="foundation/css/foundation.min.css"> 
</head> 
<body> 

    <div ng-app="myApp"> 
    <div ng-controller="CardsCtrl"> 

     <table> 
     <tr ng-repeat="set in cards.sets | orderBy:'releaseDate'"> 
      <td>{{set.name}}</td> 
      <td>{{set.code}}</td> 
      <td>{{set.releaseDate}}</td> 
     </tr> 
     </table> 

    </div> 
    </div> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script> 
    <script type="text/javascript" src="scripts/main.js"></script> 
</body> 
</html>

所以，你可以看到，我有它設置現在顯示設定，代碼和RELEASEDATE使用ng-repeat表。我試圖完成的是每當你點擊一個名字時，它展開並顯示該集合中的所有名片，顯示名字和卡號。我嘗試過像教程那樣在'zippy'屬性中包裝表格，但是這沒有成功。任何想法或建議？謝謝。

來源

2014-01-14 MyCodeSucks

所以，如果我理解正確的話，你需要一個手風琴控制是可以摺疊的d提供物品清單？ –

所以，我會以表格格式來做這件事，但它很奇怪，因爲它會在第一個td的範圍內;你可能想考慮一個不同的佈局。爲了可視化，我將set.name變成可點擊的鏈接，但我相信它可以是任何元素。

請注意，這未經測試;我在這裏看到的最佳實踐應該是包含plnkr.co或jsfiddle.net參考。

查看：

<td> 
    <a href="" ng-click="showThisRow(set)"> 
    {{set.name}} 
    </a> 
    <p ng-repeat="card in set.cards" ng-if="showRow"> 
    {{card.number}} : {{card.name}} 
    </p> 
</td>

控制器：

$scope.showThisRow = function (whichSet) { 
    if (whichSet.showRow == true) { 
    whichSet.showRow = false; 
    } else { 
    whichSet.showRow = true; 
    } 
}

註釋：這是什麼東西做的是一個嵌套的NG-重複呼叫，其顯示僅在showRow變量的值是真實的。即使沒有在控制器內指定，showRow也可以通過ng-click調用實例化爲set（第一個ng-repeat的一個實例）的方法。

我不知道Angular是否提供類似於jQuery切換的功能;如果知道的人也可以發表評論，將不勝感激。

來源

2014-01-15 03:31:15 user3043124

選擇個別項目ng-repeat的技巧是在與ng-repeat相同的元素中包含controller。 ng-repeat專用控制器將包含迭代生成的所有新項目，ng-click調用該控制器中的一個功能將執行項目選擇。

觀點：

<div ng-controller="TableCtrl"> 
    <table class="table table-condensed table-hover"> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Company</th> 
     </tr> 
     </thead> 
     <tbody ng-repeat="i in invoices" 
      ng-controller="RowCtrl" 
      ng-click="toggleRow()" 
      ng-switch on="isSelected()"> 
     <tr> 
      <td>{{i.name}}</td> 
      <td>{{i.company}}</td> 
     </tr> 
     <tr ng-switch-when="true"> 
      <td>{{i.invoice}}</td> 
      <td>{{i.units}}</td> 
     </tr> 
     </tbody> 
    </table> 
</div>

控制器：

.value('invoices', [ 
    { name:'Jack', company:'Blue Widget Co', invoice:'$3,000,000', units: '555'}, 
    { name:'Jill', company:'Red widget Co', invoice:'$2,000,000', units: '777' } 
]) 

.controller('TableCtrl', function ($scope, invoices) { 
    $scope.invoices = invoices; 
}) 

.controller('RowCtrl', function ($scope) { 
    $scope.toggleRow = function() { 
    $scope.selected = !$scope.selected; 
    }; 

    $scope.isSelected = function (i) { 
    return $scope.selected; 
    }; 
});

在RowCtrl，請注意i從ng-repeat="i in invoices"：

$scope.isSelected = function (i) { 
    return $scope.selected; 
};

繼承人工作expandable table demo

來源

2014-01-15 06:58:52 cheekybastard

@cheekybastard這可以通過使用指令進一步簡化。

指令：

app.directive('cdToggleOnClick', function() 
{ 
    return { 
     restrict: 'A', 
     scope: 
     { 
      cdToggleOnClick: '=' 
     }, 
     link: function(scope, element, attrs) { 
      element.bind('click', function() { 
       if (scope.cdToggleOnClick === true) 
       { 
        scope.cdToggleOnClick = false; 
       } 
       else 
       { 
        scope.cdToggleOnClick = true; 
       } 
       scope.$apply(); 
      }); 
     } 
    } 
});

HTML：

<div ng-controller="Ctrl"> 
    <table border=1> 
     <tr ng-repeat-start="i in invoices" cd-toggle-on-click="toggleRow"> 
      <td>{{i.name}}</td> 
      <td>{{i.company}}</td> 
     </tr> 
     <tr ng-repeat-end ng-if="toggleRow"> 
      <td>{{i.invoice}}</td> 
      <td>{{i.units}}</td> 
     </tr> 
    </table> 
</div>

控制器：

app.controller('Ctrl', function ($scope) { 
    $scope.invoices = [ 
    { name:'Jack', company:'Blue Widget Co', invoice:'$3,000,000', units: '555'}, 
    { name:'phil', company:'green Widget Co', invoice:'$1,000,000', units: '545'}, 
    { name:'Jill', company:'Red widget Co', invoice:'$2,000,000', units: '777' } 
    ]; 
});

Plunker Demo

來源

2015-03-21 14:55:02 curlyhairedgenius

使用AngularJS的表格中的可擴展內容

回答

相關問題