http://jsfiddle.net/q2y93ym7/1/

Question

我有一份州名单（佛罗里达州，阿拉巴马州......），我想在第一个字母的第一次出现之上创建命名锚点。

信件链接

  <nav>
    <ul class="letters">
      <li ng-repeat="letter in locations.getLetters()">
        <a href="#{{letter}}">{{letter}}</a>
      </li>
    </ul>
  </nav>

国

     <nav>
        <ul class="locations">
          <li ng-repeat="state in locations.states">{{state.state}}
            <a ng-if="" id="{{state.state.charAt(0)}}">fgsdf</a>
            <ul>
              <li ng-repeat="city in state.cities">
                <a href>{{city.name}}</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

我被困在<a ng-if="" id="{{state.state.charAt(0)}}">fgsdf</a>

我尝试了ng-if="!document.getElementById(state.state.charAt(0))"，但这并不奏效。有没有人对我应该怎么做？

更新

我考虑使用角度内置的过滤器来过滤ngRepeat中的状态。当用户点击A时，只会显示以A开头的状态。这似乎是一种更清洁，更直观的方法，并将改善用户体验。

Answer 1

您可以尝试这种方法

让我们假设您将输入作为一个简单的字符串数组。在将它放入控制器之前，我们可以使用一个简单的对象按每个州的第一个字母对状态进行分组（字母是键，值是字符串数组）

http://jsfiddle.net/q2y93ym7/1/

<强> HTML ：

<body ng-app="HelloApp" ng-controller="Controller" class="container"> 
    <div class="well">
        <a href="#{{letter}}" ng-repeat="(letter,states) in letters">{{letter}} </a> 
    </div>

    <div ng-attr-id="{{letter}}" ng-repeat="(letter,states) in letters">
         <h1>{{letter}}</h1>
         <h2 ng-repeat="state in states">{{state}}</h2>
        <hr>
    </div>
</body>

<强> JS ：

angular.module('HelloApp', [])
    .controller('Controller', function ($scope) {
    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyomin'];

    // Let's prepare the input

    var letters = $scope.letters = {};
    states.forEach(function (state) {
        var letter = state.charAt(0);
        if (!letters[letter]) {
            letters[letter] = [];
        }

        letters[letter].push(state);
    });

})

编辑：

正如@DRobinson所说，没有什么能保证对象的键被排序。因此，您可以尝试使用this great approach /而不是Object，使用数组
添加<h1>{{letter}}</h1>，谢谢@Tony

Answer 2

由于文档不属于当前范围，因此无法正常工作。以下是您可以做的事情：

控制器：

$scope.elementExists = function (selector) {
    return typeof $document.getElementById(selector) !== 'undefined';
}

HTML：

<a ng-if="!elementExists('elementId')">Link</a>

不要忘记添加$ document作为控制器的依赖项。

Angular创建元素，如果另一个不存在

信件链接

国

更新

2 个答案:

http://jsfiddle.net/q2y93ym7/1/

编辑：