Question

HTML不起作用。我想在<h4>标签所在的数组中显示所有这些字母。我的访问无效。我该如何解决这个问题？

HTML：

<div class="col-sm-6 words" ng-repeat="choice in images[num].letters">
    <h4>{{choice}}</h4>
</div>

JS：

    $scope.num = 0;
    $scope.images = 
    [ 

    { pics: ["img/carrion.png", "img/telefrag.png", "img/thunder-skull.png", "img/skull-ring.png"], word: 'skull', length: 5, 
    'letters': ['u', randLet(), randLet(), randLet(), 's', randLet(), 'k', 'l', randLet(), randLet(), randLet(), 'l' ]},

    { pics: ["img/angry-eyes.png", "img/behold.png", "img/spectacle-lenses.png", "img/falling-eye.png"], word: 'eye', length: 3},
    ];

Answer 1

通过$ index解决重复数据使用跟踪的问题。喜欢这个代码

<div ng-repeat="choice in images[num].letters track by $index">
        <h4>{{choice}}</h4>
    </div>

Answer 2

你需要做的就是在这个div中嵌套另一个ng-repeat

<div class="col-sm-6 words" ng-repeat="choice in images[num].letters">
    <h4>{{choice}}</h4>
</div>

类似

<div class="col-sm-6 words" ng-repeat="image in images">
    <div ng-repeat="propValue in image">
      {{propValue}}
    </div>
</div>

在这种情况下，图像中的图像会迭代图像数组中的每个对象。下一个ng-repeat正在迭代每个单独对象的属性值。希望这有意义并帮助你！

Answer 3

替换为以下。

<div class="col-sm-6 words" ng-repeat="image in images">
  <div ng-repeat="choice in image.letters">
     <h4>{{choice}}</h4>
  </div>
</div>

Answer 4

运行代码时遇到的问题是ng-repeat中重复值的代码（即＆＃34; l＆＃34;和＃34; l＆＃34;）。也许有更好的解决方法，但这是我的工作解决方案：

的index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="ctrl.js"></script>
  </head>
  <body>
    <div ng-controller="lettersCtrl">
      <div ng-repeat="letter in images[num].letters">
        <h4>{{ letter[0] }}</h4>
      </div>
    </div>
  </body>
</html>

ctrl.js

angular.module('app', []).controller('lettersCtrl', function($scope, $http) {
  $scope.num = 0;
  $scope.images = [ 
    {
      pics: ["img/carrion.png", "img/telefrag.png", "img/thunder-skull.png", "img/skull-ring.png"],
      word: 'skull',
      length: 5, 
      letters: ['u', 's', 'k', 'l1', 'l2']
    },
    {
      pics: ["img/angry-eyes.png", "img/behold.png", "img/spectacle-lenses.png", "img/falling-eye.png"],
      word: 'eye',
      length: 3
    }
  ];
});

我会创建一个循环遍历所有字母的函数，并在更新输出数据之前添加一些事件。

Answer 5

'letters'：['你'，'a'，'b'，'c'，'d'，'e'，'k'，'y'，'f'，'g'，'m '，'l']

请检查你的randLet（）是否有重复的字母。这是问题所在。

AngularJS：如何使用ng-repeat显示父数组中包含的数组的所有元素

5 个答案:

的index.html

ctrl.js