有角创建元素（如果不存在）
[英]Angular create element if another is non-existent
问题描述
I have a list of states (Florida, Alabama ...) and I want to create named anchors above the first occurance of the first letter. 
我有一个州（佛罗里达，阿拉巴马州）的列表，我想在第一个字母的第一次出现上方创建命名锚。
Letter Links 信件链接
<nav>
<ul class="letters">
<li ng-repeat="letter in locations.getLetters()">
<a href="#{{letter}}">{{letter}}</a>
</li>
</ul>
</nav>
States 状态
<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>
I am stuck at <a ng-if="" id="{{state.state.charAt(0)}}">fgsdf</a> 我被困在<a ng-if="" id="{{state.state.charAt(0)}}">fgsdf</a>
I have tried ng-if="!document.getElementById(state.state.charAt(0))" and that doesn't work. 我已经尝试了ng-if="!document.getElementById(state.state.charAt(0))" ，但该方法不起作用。 Does anyone have any suggestions as to how I should go about this? 有人对我应该如何处理有任何建议吗？
Update 更新
I've considered using angular's built-in filters to filter the states in ngRepeat . 我考虑过使用angular的内置过滤器过滤ngRepeat的状态。 When a user clicks A , only the states starting with A should show. 用户单击A ，仅应显示以A开头的状态。 This seems like a much cleaner and more intuitive approach and will improve UX. 这似乎是一种更干净，更直观的方法，并将改善用户体验。
2 个解决方案
解决方案1
2 已采纳 2015-05-14 23:15:28
You can try this approach 您可以尝试这种方法
let's assume you have the input as a simple array of strings. 假设您输入的内容是一个简单的字符串数组。 before placing it in the controller, we can group states by the first letter of each state using a simple object (the letter is a key, the value is an array of strings) 在将其放入控制器之前，我们可以使用一个简单的对象按每个状态的第一个字母对状态进行分组（字母是键，值是字符串数组）
http://jsfiddle.net/q2y93ym7/1/ http://jsfiddle.net/q2y93ym7/1/
html : 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 : 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);
});
})
EDIT: 编辑：
- As @DRobinson says, nothing guarantees keys of an Object will be sorted. 正如@DRobinson所说，没有任何东西可以保证对对象的键进行排序。 therefore you can try using this great approach / instead an Object, use an array 因此，您可以尝试使用这种出色的方法 /代替Object，使用数组
- added
<h1>{{letter}}</h1>, thanks @Tony添加了<h1>{{letter}}</h1>，谢谢@Tony
解决方案2
-2 2015-05-14 22:51:18
That won't work because document is not part of the current scope. 那是行不通的，因为文档不是当前范围的一部分。 Here's what you can do: 您可以执行以下操作：
Controller: 控制器：
$scope.elementExists = function (selector) {
return typeof $document.getElementById(selector) !== 'undefined';
}
Html: HTML：
<a ng-if="!elementExists('elementId')">Link</a>
Don't forget to add $document as a dependency of your controller. 不要忘记添加$ document作为控制器的依赖项。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.