Question

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

A | B | C | D | E | F | G | H |我| J | K | L | M | N | O | P |问| R | S | T | U | V | W | X | Y | 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-item):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

Answer 2

当我需要分隔符时，我更喜欢使用 ng-repeat-start 和 ng-repeat-end 。这样，您就不会被迫在项目和分隔符周围放置元素。使用 ng-if 删除之前的最后一个分隔符。请注意，我移动了＆amp; nbsp;在分隔符内，以便没有＆amp; nbsp;落后你的Z（与你的一样）。

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

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

AngularJS ng-repeat with delimiter

2 个答案: