AngularJS:ng-repeat 和 ng-include 在多维数组上 [英] AngularJS: ng-repeat with ng-include on a multidimensional array

查看：20
本文介绍了AngularJS:ng-repeat 和 ng-include 在多维数组上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我昨天开始使用 AngularJS，我需要关于大型抽象的帮助.

所以，我的 Controller.js 中有一个多维数组:

var appname = angular.module('appname');appname.controller('articleCollectionController', ['$scope', '$sce', function ($scope, $sce) {$scope.news = [{title: 'foobar 突破',文本:'foobar foobar'，图像:'<img class="img-responsive img-hover" src="images/foo.jpg">',日期:'2014 年 6 月 17 日'，作者:'约翰史密斯'，文章类型:链接"，neverSettle: '吸引人',类别:'新闻'},{title: 'foobars 可用',text: 'foobee foobar',图像:'<img class="img-responsive img-hover" src="images/bar.jpg">',日期:'2014 年 6 月 17 日'，作者:'约翰史密斯'，文章类型:链接"，neverSettle: '创新',类别:'新闻'},{标题: 'foo foo foo',文字:'foobar foobar！foob​​ar',图像:'<img class="img-responsive img-hover" src="images/foobar.jpg">',日期:'2014 年 6 月 17 日'，作者:'爱丽丝罗伯茨'，文章类型:'pdf'，neverSettle: '合作',类别:'新闻'}];}]);

我在所有项目上运行 $sce.trustAsHtml 并且它们完美地呈现 html.

所以，我想做的是使用 ng-include<调用的模板 articleCollection.htm 在我的页面 news.html 上使用 ng-repeat/代码>.

news.html:

<div ng-include src="js/views/articleCollection.htm"></div>

articleCollection.htm:

<div class="row"><div class="col-md-1 text-center"><p><span ng-bind-html="x.articleType"></span></p><p><span ng-bind-html="x.neverSettle"></span></p><p><span ng-bind-html="x.date"></span></p>

<div class="col-md-5"><a href="news-article.html"><span ng-bind-html="x.image"></span></a>

<div class="col-md-6"><h3><a href="news-article.html"><span ng-bind-html="x.title"></span></a><p>由<span ng-bind-html="x.author"></span></p><p><span ng-bind-html="x.text"></span></p><a class="btn btn-default" href="news-article.html">阅读更多 <i class="fa fa-angle-right"></i></a>

但是，这是在我的页面上呈现的内容:

<!-- ngRepeat: x in news --><div ng-repeat="x in news" class="ng-scope"><!-- ngInclude:-->

<!-- end ngRepeat: x in news --><div ng-repeat="x in news" class="ng-scope"><!-- ngInclude:-->

<!-- end ngRepeat: x in news --><div ng-repeat="x in news" class="ng-scope"><!-- ngInclude:-->

<!-- end ngRepeat: x in news -->

由于我刚刚开始使用 AngularJS，我的代码中可能存在很多问题；我不知道从哪里开始调试.

为什么我要在我的页面上呈现注释掉的内容，而不是重复 ng 的 articleCollection.htm?

提前致谢，感谢您的任何意见.

解决方案

ngInclude 指令采用 src 属性中的表达式.这意味着如果它只是一个 static 字符串路径，则您需要在引号中提供一个字符串路径:

<div ng-include src="'js/views/articleCollection.htm'"></div>

I've started AngularJS yesterday and I need help on a large abstraction.

So, I have a multidimensional array in my Controller.js:

var appname = angular.module('appname');

appname.controller('articleCollectionController', ['$scope', '$sce', function ($scope, $sce) {
     $scope.news = [{
         title: 'foobar breakthrough',
         text: 'foobar foobar',
         image: '<img class="img-responsive img-hover" src="images/foo.jpg">',
         date: 'June 17, 2014',
         author: 'John Smith',
         articleType: 'link',
         neverSettle: 'engaging',
         category: 'news'
     },
     {
         title: 'foobars available',
         text: 'foobee foobar',
         image: '<img class="img-responsive img-hover" src="images/bar.jpg">',
         date: 'June 17, 2014',
         author: 'John Smith',
         articleType: 'link',
         neverSettle: 'innovating',
         category: 'news'
     },
     {
         title: 'foo foo foo',
         text: 'foobar foobar! foobar',
         image: '<img class="img-responsive img-hover" src="images/foobar.jpg">',
         date: 'June 17, 2014',
         author: 'Alice Roberts',
         articleType: 'pdf',
         neverSettle: 'partnering',
         category: 'news'
     }
  ];
  }]);

I run $sce.trustAsHtml on all items and they render html perfectly.

So, what I want to do is use ng-repeat on my page news.html using the template articleCollection.htm called by ng-include.

news.html:

<div ng-repeat="x in news">
    <div ng-include src="js/views/articleCollection.htm"></div>
</div>

articleCollection.htm:

<!-- Blog Preview Row -->
<div class="row">
    <div class="col-md-1 text-center">
        <p>
            <span ng-bind-html="x.articleType"></span>
        </p>
        <p>
            <span ng-bind-html="x.neverSettle"></span>
        </p>
        <p><span ng-bind-html="x.date"></span></p>
    </div>
    <div class="col-md-5">
        <a href="news-article.html">
            <span ng-bind-html="x.image"></span>
        </a>
    </div>
    <div class="col-md-6">
        <h3>
            <a href="news-article.html"><span ng-bind-html="x.title"></span></a>
        </h3>
        <p>
            by <span ng-bind-html="x.author"></span>
        </p>
        <p><span ng-bind-html="x.text"></span></p>
        <a class="btn btn-default" href="news-article.html">Read More <i class="fa fa-angle-right"></i></a>
    </div>
</div>
<!-- /.row -->

However, this is what is rendered on my page:

<!-- ngRepeat: x in news -->
<div ng-repeat="x in news" class="ng-scope">
    <!-- ngInclude:  -->
</div>
<!-- end ngRepeat: x in news -->
<div ng-repeat="x in news" class="ng-scope">
    <!-- ngInclude:  -->
</div>
<!-- end ngRepeat: x in news -->
<div ng-repeat="x in news" class="ng-scope">
    <!-- ngInclude:  -->
</div>
<!-- end ngRepeat: x in news -->

Since I've just started AngularJS, there's just so many possible problems in my code; I don't know where to begin debugging.

How come I'm rendering commented-out content on my page, instead of the ng-repeated articleCollection.htm?

Thanks in advance, and any input is appreciated.

解决方案

ngInclude directive takes an expression in src attribute. It means that you need to provide a string path in quotes if it's just a static string path:

<div ng-repeat="x in news">
    <div ng-include src="'js/views/articleCollection.htm'"></div>
</div>

这篇关于AngularJS:ng-repeat 和 ng-include 在多维数组上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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