Question

我＆＃39;有一堆对象，我想迭代一个数组。按预期工作*image

{

  "name": "X-Wing",
  "factions": "rebels",
  "attack": 3,
  "agility": 2,

  "dial": [   // This is the data I want
    [0, 0, 0, 0, 0, 0],
    [0, 2, 2, 2, 0, 0],
    [1, 1, 2, 1, 1, 0],
    [1, 1, 1, 1, 1, 0],
    [0, 0, 1, 0, 0, 3]
  ]
}, // n...



  // Jade
.dials(ng-repeat="dial in dials track by $index")
   div(ng-repeat="moves in dial track by $index")
     span(ng-repeat="move in moves track by $index ",
        ng-class="{'empty': move === 0, 'white': move === 1,
        'green': move === 2, 'red':move === 3}") {{move}}

我正在寻找一个更复杂的可视化（* image），但我想出的只是一个有效的代码，但看起来很丑陋，闻起来很有趣。我的问题是，有没有更好的方法来编写更少的代码？

.dials(ng-repeat="dial in dials track by $index")

div.row-dial
span(ng-class="{ 'white': dial[0][0] === 1,'green': dial[0][0] === 2, 'red':dial[0][0] === 3}") 
  i(ng-if="dial[0][0] === 0") X
  i.xwing-miniatures-font.xwing-miniatures-font-turnleft(ng-if="dial[0][0] > 0")

span(ng-class="{ 'white': dial[0][1] === 1,'green': dial[0][1] === 2, 'red':dial[0][1] === 3}")
  i(ng-if="dial[0][1] === 0") X
  i.xwing-miniatures-font.xwing-miniatures-font-bankleft(ng-if="dial[0][1] > 0")

span(ng-class="{ 'white': dial[0][2] === 1,'green': dial[0][2] === 2, 'red':dial[0][2] === 3}")  
  i(ng-if="dial[0][2] === 0") X
  i.xwing-miniatures-font.xwing-miniatures-font-straight(ng-if="dial[0][2] > 0")
span(ng-class="{ 'white': dial[0][3] === 1,'green': dial[0][3] === 2, 'red':dial[0][3] === 3}")  
  i(ng-if="dial[0][3] === 0") X
  i.xwing-miniatures-font.xwing-miniatures-font-bankright(ng-if="dial[0][3] > 0")
span(ng-class="{ 'white': dial[0][4] === 1,'green': dial[0][4] === 2, 'red':dial[0][4] === 3}")  
  i(ng-if="dial[0][4] === 0") X
  i.xwing-miniatures-font.xwing-miniatures-font-turnright(ng-if="dial[0][4] > 0")
span(ng-class="{ 'white': dial[0][5] === 1,'green': dial[0][5] === 2, 'red':dial[0][5] === 3}")  
  i(ng-if="dial[0][5] === 0") X
  i.xwing-miniatures-font.xwing-miniatures-font-kturn(ng-if="dial[0][5] > 0")


div.row-dial

span(ng-class="{ 'white': dial[1][0] === 1,'green': dial[1][0] === 2, 'red':dial[1][0] === 3}") 
  i(ng-if="dial[1][0] === 0") X

  i.xwing-miniatures-font.xwing-miniatures-font-turnleft(ng-if="dial[1][0] > 0")
span(ng-class="{ 'white': dial[1][1] === 1,'green': dial[1][1] === 2, 'red':dial[1][1] === 3}")
  i(ng-if="dial[1][1] === 0") X

  i.xwing-miniatures-font.xwing-miniatures-font-bankleft(ng-if="dial[1][1] > 0")
span(ng-class="{ 'white': dial[1][2] === 1,'green': dial[1][2] === 2, 'red':dial[1][2] === 3}")  
  i(ng-if="dial[1][2] === 0") X

  i.xwing-miniatures-font.xwing-miniatures-font-straight(ng-if="dial[1][2] > 0")
span(ng-class="{ 'white': dial[1][3] === 1,'green': dial[1][3] === 2, 'red':dial[1][3] === 3}")  
  i(ng-if="dial[1][3] === 0") X

  i.xwing-miniatures-font.xwing-miniatures-font-bankright(ng-if="dial[1][3] > 0")
span(ng-class="{ 'white': dial[1][4] === 1,'green': dial[1][4] === 2, 'red':dial[1][4] === 3}")  
  i(ng-if="dial[1][4] === 0") X

  i.xwing-miniatures-font.xwing-miniatures-font-turnright(ng-if="dial[1][4] > 0")
span(ng-class="{ 'white': dial[1][5] === 1,'green': dial[1][5] === 2, 'red':dial[1][5] === 3}")  
  i(ng-if="dial[1][5] === 0") X

  i.xwing-miniatures-font.xwing-miniatures-font-kturn(ng-if="dial[1][5] > 0")


  // ... you get the idea...

Answer 1

您应迭代xwings数组，然后遍历其public class MyClass <T extends Integer, V extends Character, W extents String> extends SuperClass <T> implements SomeInterface <V>, SomeOtherInterface <W> {...}，然后使用嵌套MyClass来解决public class MyClass extends SuperClass <Integer> implements SomeInterface <Character>, SomeOtherInterface <String> {...}和dials

PLUNKER

像这样的东西

ng-repeat

Answer 2

您可以通过选择基于=IF(A2<>"",COUNTA($A$2:A2),"")的课程来简化它。像（缩进可能需要更改，我试图遵循原始缩进）：

$index

但是，这不是很简洁，所以我会为这两个类使用查找表：

.dials(ng-repeat="dial in dials track by $index")
div.row-dial(ng-repeat="moves in dial track by $index")
span(ng-repeat="move in moves track by $index ", ng-class="{'white': move === 1, 'green': move === 2, 'red':move === 3}")
  i(ng-if="move === 0") X
  i.xwing-miniatures-font(ng-if="move > 0", ng-class="{
    'xwing-miniatures-font-turnleft': $index === 0,
    'xwing-miniatures-font-bankleft': $index === 1,
    'xwing-miniatures-font-straight': $index === 2,
    'xwing-miniatures-font-bankright': $index === 3,
    'xwing-miniatures-font-turnright': $index === 4,
    'xwing-miniatures-font-kturn': $index === 5}")

然后模板可以（缩进可能需要更改）：

$scope.fontColors = [null, 'white', 'green', 'red'];
$scope.fontClasses = ['xwing-miniatures-font-turnleft', 'xwing-miniatures-font-bankleft', 'xwing-miniatures-font-straight', 'xwing-miniatures-font-bankright','xwing-miniatures-font-turnright', 'xwing-miniatures-font-kturn'];

Angular.js ng-repeat表示法

2 个答案:

PLUNKER