Расширяемый контент в таблицах с использованием AngularJS

Я следил за учебниками для AngularJS на Egghead. Все идет неплохо, пока я не попытаюсь объединить некоторые понятия.Расширяемый контент в таблицах с использованием AngularJS

My 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; 
    } 
}

Примечание: То, что это делает это вложенным нг-повтор вызов, который отображается только в том случае, если значение переменного showRow верно. showRow может быть создан как метод set (экземпляр первого ng-повтора) посредством вызова ng-click даже без указания в контроллере.

Я не знаю, если Угловой обеспечивает что-то похожее на toggle в jQuery; было бы полезно, если бы кто-то, кто знает, тоже мог прокомментировать.

источник

2014-01-15 03:31:15 user3043124

Трюк с подбором отдельных предметов ng-repeat, является включением controller в том же элементе, что и ng-repeat. Специальный контроллер 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; 
};

Heres рабочий 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

ответ

Смежные вопросы