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

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

javascript html angularjs

Javascript AngularJS：如何使用ng repeat显示父数组中包含的数组的所有元素,javascript,html,angularjs,Javascript,Html,Angularjs,HTML不起作用。我想显示数组中标记所在的所有字母。我的访问权限不工作。我该如何解决这个问题 HTML: 您需要做的就是在这个div中嵌套另一个ng repeat <div class="col-sm-6 words" ng-repeat="choice in images[num].letters"> <h4>{{choice}}</h4> </div> {{choice}} 差不多 <div class="col-sm-6

HTML不起作用。我想显示数组中

标记所在的所有字母。我的访问权限不工作。我该如何解决这个问题

HTML:

您需要做的就是在这个div中嵌套另一个

ng repeat

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


{{choice}}

差不多

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


{{propValue}}

在本例中，“图像中的图像”在图像数组中的每个对象上迭代。下一个ng重复是迭代每个单独对象的属性值。希望这是有意义的，并帮助你

替换为以下内容

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


{{choice}}

我在运行代码时遇到的问题是在ng repeat（即“l”和“l”）中出现重复值时代码中断。也许有更好的解决方法，但以下是我的工作解决方案：

index.html

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

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

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

要解决重复数据的此问题，请使用track by$index。像这样的代码

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


{{choice}}

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

<!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>

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
    }
  ];
});

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