UL 内的 ng-repeat(在 P 内)不起作用 [英] ng-repeat inside UL (which is inside a P) is not working

查看：23
本文介绍了UL 内的 ng-repeat(在 P 内)不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

UPDATE:似乎 Angular.js 不喜欢 <ul>在 <p> 内.因此，正如有用的评论者所说，替换 <p>带有 <div>解决问题.

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

<div ng-repeat="块中块"><div id="{{block.id}}" class="{{block.classes}}"><div><h1>{{block.title}}, {{block.dates}}<br/><小><a href="{{block.place.link}}" target="_blank">{{block.place.title}}</a>({{block.place.city_country}})</小>
<div><div><p><i class="{{block.icon_classes}}"></i></p>

<div><p>{{block.description.text}}</p><p ng-repeat="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 ng-repeat="point in item.points"><i class="fa-li fa fa-check"></i>{{point.text}}</p>

这是 Javascript 部分:

function BlocksCtrl($scope) {$scope.blocks = [{id: '我的身份证',班级:'class1 class2'，title: '这是标题',日期:'2007/2011'，地方: {链接:'http://www.example.com/',title: '这就是地方',city_country: '城市，国家'},icon_classes: 'fa fa-terminal fa-5x',描述: {text: '描述测试',项目: [{title: '标题测试',积分: [{text: '项目测试 1'},{text: '项目测试 2'},{text: '项目测试 3'},{text: '项目测试 4'}]}]}}];}

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


这是标题，2007/2011

这是地方(城市，国家)

描述测试

标题测试:4 - 项目测试 3


现在有人能告诉我 "{{item.points.length}} - {{item.points[2].text}}" 位是怎么工作的，但 "{{item.points[2]].text}}" 并且 UL 中的 ng-repeat 没有?

非常感谢

解决方案

您在

标签中使用了

    标签.根据 Html 文档列表元素(特别是 ol 和 ul 元素)不能是 p 元素的子元素.

    所以将 <p ng-repeat=""> 改为 <div ng-repeat=""> 或

    在堆栈溢出中看到这个问题应该 ol/ul在

    里面还是外面?

    UPDATE: It seems Angular.js doesn't like the <ul> inside a <p>. So, as helpful commenters said, replacing the <p> with a <div> solves the problem.

    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>

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

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


    This is the title, 2007 / 2011

    This is the place (City, Country)

    description test

    Title test: 4 - item test 3


    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?

    Thanks a bunch

    解决方案

    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.

    So change <p ng-repeat=""> to <div ng-repeat=""> or <span ng-repeat="">

    See this question in stack overflow Should ol/ul be inside <p> or outside?

    这篇关于UL 内的 ng-repeat(在 P 内)不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆