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

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