Question

我试图使用ng-repeat来查看来自json文件的字符串，并为字符串中的每个字符创建一个li并且它没有做任何事情。如果我在控制器中手动创建一个字符数组，则重复工作，在我的函数中，如果我将数组设置为新的，则列表会正确更新。

在我的HTML中

<ul>
    <li ng-repeat='letter in charArray'>
        {{letter}}
    </li>
</ul>
<a href class="btn" ng-click="NewWord()">New Word</a>

在我的控制器中

$scope.NewWord = function(){
    $scope.getWord();
    $scope.charArray = $scope.selectedWord.split('');

}

$scope.getWord = function(){

    $http.get('data/words.json').success(function(data){
    $scope.words = data;
    arrayLength = $scope.words.length;
    var rNum = randomIntFromInterval(0,arrayLength-1);
    $scope.selectedWord = $scope.words[rNum];

});

我也尝试过只使用字符串变量的ng-repeat。如果我做了类似$ scope.selectedWord [0]的事情，我会得到正确的字符。如果我放置{{charArray}}之类的东西，它会显示正确的数组，并在单击按钮时更新。唯一的问题是单击按钮时列表和ng-repeat没有更新。变量发生变化，但ng-repeat没有更新。

Answer 1

您可以创建自定义过滤器以按字符分割字符串：

(function() {
  angular.module('myApp')
    .filter('chars', function() {
      return function(input) {
        if (!angular.isString(input)) {
          return;
        }

        return input.split('');
      }
    });
}());

用法：

<div ng-repeat='char in "abcdefg" | chars' >
  {{char}}
</div>

或者您需要关注selectedWord并在charArray更新时更新：{/ p>

$scope.$watch('selectedWord', function(newVal) {
  $scope.charArray = newVal ? newVal.split('') : [];
});

Answer 2

您通过调用getWord（）填充数组，但angular不会等到Server响应执行下一条指令$ scope.charArray = $ scope.selectedWord.split（''）然后当它执行时$ scope.selectedWord未定义。

解决方案是在get success函数中填充$ scope.charArray，见下文，

$scope.NewWord = function(){
$scope.getWord();}

$scope.getWord = function(){
    $http.get('data/words.json').success(function(data){
    $scope.words = data;
    arrayLength = $scope.words.length;
    var rNum = randomIntFromInterval(0,arrayLength-1);
    $scope.selectedWord = $scope.words[rNum];
    $scope.charArray = $scope.selectedWord.split('');
});

具有ng-repeat的字符数组

2 个答案: