有角创建元素（如果不存在）

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))" ，但该方法不起作用。 有人对我应该如何处理有任何建议吗？

更新

我考虑过使用angular的内置过滤器过滤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所说，没有任何东西可以保证对对象的键进行排序。 因此，您可以尝试使用这种出色的方法 /代替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作为控制器的依赖项。

有角创建元素（如果不存在）

问题描述

信件链接

状态

更新

2 个解决方案

解决方案1
2 已采纳 2015-05-14 23:15:28

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

编辑：

解决方案2
-2 2015-05-14 22:51:18

有角创建元素（如果不存在）

问题描述

信件链接

状态

更新

2 个解决方案

解决方案1 2 已采纳 2015-05-14 23:15:28

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

编辑：

解决方案2 -2 2015-05-14 22:51:18

解决方案1
2 已采纳 2015-05-14 23:15:28

解决方案2
-2 2015-05-14 22:51:18