Vytvoření tabulky s angularjs

hlasů
9

Snažím se vytvořit tabulku s angularjs který bude mít pokrývajících mnoho řádků buňky.

Příklad:

http://jsfiddle.net/famedriver/kDrc6/

Příklad dat

var data = [{Colors: [red,green,blue]}]

očekávaný výstup

<table>
  <tr>
    <td rowspan=3>Colors</td>
    <td>red</td>
  </tr>
  <tr>
     <td>green</td>
  </tr>
  <tr>
     <td>blue</td>
  </tr>
 </table>

Mám to funguje pomocí ng-showdirektivy. Ale to stále ještě skýtá navíc buňku, jen skrytý. Ideální by bylo mít v tabulce správně vykreslen.

ng-switch, Jak již bylo uvedeno, nebude fungovat v některých prvků s přísné analýze (tj tabulka, která umožňuje pouze určité značky)

Nějaká rada?

Položena 06/07/2012 v 19:31
zdroj uživatelem
V jiných jazycích...                            


2 odpovědí

hlasů
6

Za normálních okolností byste mohli použít NG-přepínač pro něco takového, který podmíněně přidává / odebírá věci z DOM, na rozdíl od ng show / NG-kůže, která prostě skrýt / ukázat věci.

Ale ng přepínač nehraje pěkný s tabulkami, protože to vyžaduje zvláštní prvek pro příkazu switch.

Naštěstí někdo udělal směrnice s názvem ‚kdyby‘ , která jen má jeden atribut na prvku a podmíněně přidá / odebere ji z DOM. Je to geniální :-).

Zde je příklad toho (podívejte se do panelu ‚zdroje‘ na straně, která je součástí jsem z GitHub). http://jsfiddle.net/5zZ7e/ .

Také jsem ukázal, jak si můžete vytvořit svůj regulátory bez globální proměnné tam.

Odpovězeno 07/07/2012 v 15:18
zdroj uživatelem

hlasů
1

Zodpovězení otázky pomocí novější verzi Úhlová.

Jako Andrew Joslin píše se ng show skrývá prvek (to platí display: none). ng-switch odstraní neodpovídající prvky, ne jen jejich úkrytu. Ale také vyžaduje zvláštní prvek pro switch-whenexpresi.

Od poslední odpovědi se ng, pokud se stala součástí rohové, které již nepotřebujete externí knihovnu.

(function(win) {
  angular.module('myApp', [])
    .controller("Tester", function($scope) {
      $scope.data = {
        Colors: ["red", "green", "blue"]
      }
    })
}(window));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
  <h1>old code converted</h1>
  <p>Just converted to a newer AngularJS.</p>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="`items`.`length`" ng-show="$first">`what`</td>
        <td>`item`</td>
      </tr>
    </tbody>
  </table>
  <h1>solution via ng-if</h1>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="`items`.`length`" ng-if="$first">`what`</td>
        <td>`item`</td>
      </tr>
    </tbody>
  </table>
</div>

Odpovězeno 25/04/2015 v 07:49
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more