带分隔符的 AngularJS ng-repeat

Question

尝试使用分隔符（'|'）构建字母菜单，如下所示

一个 | 乙 | C | D | E | F | G | H | 我| J | 克| 升| 男 | 否 | 哦| P | 问 | R | | | T | 你| V | W | X | 是 | Z

我在做正确的事吗？有没有更好的方法在 angularJS 中使用分隔符重复项目？请指导我。

<div ng-app="myApp">
  <div ng-controller="myController as vm">
    <span ng-repeat="item in vm.menuItems">
      <a href="#">{{item}}</a>&nbsp;<span ng-if="!$last">|</span>
    </span>
  </div>
</div> 

<script>
  angular.module('myApp',[])
  .controller('myController',function(){
    var vm =this;
    vm.menuItems=[];
    activate();
    function activate(){
     vm.menuItems = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
    }
  });
</script>

Plunker 链接：http ://plnkr.co/edit/FJEi8T36KGIx1K0hHrFG

Answer 1

这根本不是一个糟糕的解决方案！不过，一个“更干净”的方法可能是用 css 来做到这一点：

ul.menu li {
  display: inline;
}

.menu li:not(:last-child):after {
   content: " |";
}

我已经将你的模板更改为

<div ng-app="myApp">
  <ul class="menu" ng-controller="myController as vm">
    <li ng-repeat="item in vm.menuItems">
      <a href="#">{{item}}</a>
    </li>
  </ul>
</div>

垂直条是应该在标记中（它是否增加了语义价值？）还是在样式中（它是纯粹的视觉变化吗？），这完全取决于您。

http://plnkr.co/edit/kwGWBZfeWnuQ2wb4b9Ev?p=preview