纳克重复内的UL（这是一个P的内侧）不工作 [英] ng-repeat inside UL (which is inside a P) is not working

问题描述

更新：看来Angular.js不喜欢的＆lt; UL＆GT; P＆取代。;一个与所述内因此，作为有益的评论者说，更换的＆lt; P＆GT;用＆LT; D​​IV＆GT;解决这个问题。的

很抱歉，如果这可能是Angular.js一个新手的问​​题，但我似乎无法找到这个code中的错误。考虑下面的HTML：

Sorry if this may be a newbie question on Angular.js but I just can't seem to find the error in this code. Consider the following 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位：

This is the Javascript bit:

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/ ）：

This will display the following output (you can check a working example on JSFiddle http://jsfiddle.net/uskL6/):

描述测试

职称考试：4 - 项测试3

Title test: 4 - item test 3

现在有人可以告诉我怎么回事了{{item.points.length}} - {{item.points [2]的.text}}位工作正常，但{{item.points [2 ]的.text}}和UL内NG重复不？

Now can someone tell me how is it that the "{{item.points.length}} - {{item.points[2].text}}" bit works fine but the "{{item.points[2].text}}" and the ng-repeat inside the UL don't?

多谢

推荐答案

您用＆LT; OL＆GT; 标记内＆LT; P＆GT; 标记。据 HTML文档
列表元素（特别是OL和UL元素）不能是p元素的孩子。

You were using <ol> tag inside <p> tag. According to Html documentation List elements (in particular, ol and ul elements) cannot be children of p elements.

所以变化＆LT; p NG重复=＆GT; 到＆LT; D​​IV NG重复=＆GT; 或＆LT;跨度NG重复=＆GT;

见堆栈溢出 应该OL / UL这个问题在里面＆LT; p＆GT; 或外部

这篇关于纳克重复内的UL（这是一个P的内侧）不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！