UL(在 P 内部)内的 ng 重复不起作用

ng-repeat inside UL (which is inside a P) is not working

本文关键字:ng 不起作用 内的 内部 UL      更新时间:2023-09-26

UPDATE看起来Angular.js不喜欢

中的

    。因此,正如有用的评论者所说,用
    替换

    可以解决问题。

抱歉,如果这可能是 Angular 上的新手问题.js但我似乎无法在此代码中找到错误。请考虑以下 HTML:

<div ng-app ng-controller="BlocksCtrl">
    <div ng-repeat="block in blocks">
        <div id="{{block.id}}" class="{{block.classes}}">
            <div>
                <h1>{{block.title}}, {{block.dates}}
                    <br/>
                    <small>
                        <a href="{{block.place.link}}" target="_blank">
                            {{block.place.title}}</a>
                        ({{block.place.city_country}})
                    </small>
                </h1>
            </div>
            <div>
                <div>
                    <p><i class="{{block.icon_classes}}"></i></p>
                </div>
                <div>
                    <p>
                        {{block.description.text}}
                    </p>
                    <p ng-repeat="item in block.description.items">
                        <b>{{item.title}}</b>: {{item.points.length}} - {{item.points[2].text}}
                        <ul class="fa-ul">
                            <li>
                                <i class="fa-li fa fa-check"></i>{{item.points[2].text}}
                            </li>
                            <li ng-repeat="point in item.points">
                                <i class="fa-li fa fa-check"></i>{{point.text}}
                            </li>
                        </ul>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

这是Javascript位:

function BlocksCtrl($scope) {
  $scope.blocks = [
    {
      id: 'my-id',
      classes: 'class1 class2',
      title: 'This is the title',
      dates: '2007 / 2011',
      place: {
        link: 'http://www.example.com/',
        title: 'This is the place',
        city_country: 'City, Country'
      },
      icon_classes: 'fa fa-terminal fa-5x',
      description: {
        text: 'description test',
        items: [
          {
            title: 'Title test',
            points: [
              {text: 'item test 1'},
              {text: 'item test 2'},
              {text: 'item test 3'},
              {text: 'item test 4'}
            ]
          }
        ]
      }
    }
  ];
}

这将显示以下输出(您可以在 JSFiddle 上检查工作示例http://jsfiddle.net/uskL6/):


这是标题,2007/2011

这是地方(城市,国家)

描述测试

职称测试:4 - 项目测试 3


现在有人可以告诉我为什么"{{item.points.length}} - {{item.points[2].text}}"

位工作正常,但"{{item.points[2].text}}"和UL内部的ng-repeat不起作用?

谢谢一堆

您在标签中使用<ol>标签<p>。根据 Html 文档列表元素(特别是 ol 和 ul 元素)不能是 p 元素的子元素

因此,请将

<p ng-repeat="">更改为<div ng-repeat=""><span ng-repeat="">

在堆栈溢出中看到这个问题 ol/ul 应该在 <p> 内部还是外部?

起初我以为这很简单...

然后它让我发疯了...

解决方案:<p ng-repeat="...">更改为 <div ng-repeat="..."> 。然后它起作用;为什么,我不知道...