Question

我刚刚开始学习Angular而无法使用ng-repeat管理问题。

我想在单个span元素中显示输入中的每个字母。我尝试了很多方法但没有任何作用。

Answer 1

这是你要找的吗？

每个字母将以不同的跨度打印。

solution 错误：ngRepeat：dupes

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  
});

.center-block {
  float: none;
}

input {
  margin: 20px;
}

span:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" class="container">

  <div class="col-sm-10 center-block text-center">

    <input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />

    <div ng-repeat="letter in word.split('') track by $index">
      <span> {{ letter }} </span>
    </div>
    <br/><br/> If you want to split the word by line <br/><br/>
    <div ng-repeat="letter in word.split(' ') track by $index">
      <span> {{ letter }} </span>
    </div>
  </div>
</div>

Answer 2

您需要引用别名 Letter 而不是 Word

<div ng-app="myApp" ng-controller="myCtrl" class="container">

  <div class="col-sm-10 center-block text-center">

    <input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />

    <div ng-repeat="letter in word.split('') track by $index">
      <span> {{letter }} </span>
    </div>
  </div>
</div>

修改

显然正在发生的事情是word.split('')不允许任何重复。

"thisisatest".split('')如果这是输入到控制台，它会分裂你期望它。我不明白为什么word.split('')正在删除重复项。在codepen中键入一个包含唯一字符的字符串，它将正确显示。

修改

每 p2。回答track by $index跟踪所有重复项。这解决了这个问题。拆分导致数组中出现重复的项目而没有track by $index angular只是没有显示重复项

Answer 3

您还应该使用flag.Arg(0)与track by $index来处理ng-repeat

Duplicate Key in Repeater

角度ng重复。循环遍历字符串中的字母

3 个答案:

修改

修改