ng-repeat 字符串数组到单独的 <li> 元素不起作用

Question

我有一组对象。每个对象内部都有一个字符串数组。我想要完成的是使用 ng-repeat 迭代对象，但在该 ng-repeat 内部有另一个 repeat 来迭代字符串数组。我希望每个字符串都是它自己的 ul li 元素。我已经阅读了几篇 Whosebug 帖子，我最接近的解决方案似乎是遍历字符串数组，但将它们全部放在一个 'li' 元素中。将 ng-repeat 从 'li' 元素移动到 'a' 标签并没有解决这个问题。有人会看一下这个并告诉我将这些字符串分成不同的 'li' 元素的正确方法吗？

问题图片

对象数组（使用 $ctrl.websites 从控制器访问）

[
  {
    id:'someID',
    title: 'First title',
    listOfTechnologies: ['KeystoneJS', 'ExpressJS', 'MongoDB']
  },
  {
    id:'anotherID',
    title: 'Second Title',
    listOfTechnologies: ['MongoDB', 'ExpressJS', 'AngularJS', 'NodeJS']
  }
]

HTML

<div class='container-fluid'>
<div class='row' ng-repeat="website in $ctrl.websites">
    <div class='col-12 col-md-6 d-none d-md-block marigold-bg'>
        <p class='sr-only'>Marigold Box</p>
    </div><!--marigoldBox-->
    <div class='col-12 col-md-6 pt-3 webProjectBox'>
        <h2 class='sr-only'>Web Projects</h2>
        <div class='row'>
            <div class='col-3'> ...</div><!--End of col-sm-3-->
            <div class='col-9'> ...</div><!--End of col-sm-9-->
        </div><!--End of row-->
        <div class='row'>
            <div class='col-3'>...</div>
            <div class='col-9'>...</div>
        </div>
        <div class='row pt-3'>
            <div class='col-12 text-center'>...</div>
        </div>
        <div class='row pt-2'>
            <div class='col-12 col-md-6 text-center'>
                <a href="{{website.linkToWeb}}"><u class='view-link'><span class='h4'><i class='fa fa-eye' aria-hidden="true"></i> View on the Web</span></u></a>
            </div>
            <div class='col-12 col-md-6 text-center'>
                <a href="{{website.linkToGithub}}"><u class='view-link'><span class='h4'><i class='fa fa-github' aria-hidden="true"></i> View on Github</span></u></a>
            </div>
        </div>
        <div class='row pt-3'>
            <ul class="nav nav-pills">
              <li class="nav-item m-1 animated technologies" ng-repeat="item in website.listOfTechnologies track by $index">
                <a class="nav-link btn btn-sm btn-warning disabled" href="#">{{website.listOfTechnologies[$index]}}</a>
              </li>
            </ul>
        </div>
    </div><!--Web Project Container-->
</div><!--End of row-->
</div><!--End of container-->

Answer 1

如果您已经通过 $scope.<property> 定义了范围，则不需要使用 $ctrl 来引用它。

创建了一个简单的 Codepen 说明其工作原理

<div ng-app="myapp">
  <div ng-controller="ctlr">
    <div ng-repeat="one in web">
      {{one.id}}
      <ul>
        <li ng-repeat="two in one.listOfTechnologies">
          {{two}}
        </li>
      </ul>
    </div>
  </div>
</div>


angular.module("myapp", [])
    .controller("ctlr", function($scope){
  $scope.web = [
  {
    id:'someID',
    title: 'First title',
    listOfTechnologies: ['KeystoneJS', 'ExpressJS', 'MongoDB']
  },
  {
    id:'anotherID',
    title: 'Second Title',
    listOfTechnologies: ['MongoDB', 'ExpressJS', 'AngularJS', 'NodeJS']
  }
];
})

ng-repeat 字符串数组到单独的 <li> 元素不起作用

ng-repeat array of strings into seperate <li> elements not working

angularjs

angularjs-ng-repeat