从 wordpress 网站解析 json 数据时，嵌套的 ng-repeat 不起作用

Question

我正在使用 Ionic 开发新闻应用程序。新闻来自 json 格式的 wordpress 网站。这是 json 的一小部分。

{
"status": "ok",
"count": 100,
"count_total": 4104,
"pages": 42,
"posts": [
    {
        "id": 57063,
        "type": "post",
        "slug": "%e0%a6%b6%e0%a6%bf%e0%a6%ac%e0%a6%bf%e0%a6%b0%e0%a7%87%e0%a6%b0-%e0%a6%95%e0%a7%87%e0%a6%a8%e0%a7%8d%e0%a6%a6%e0%a7%8d%e0%a6%b0%e0%a7%80%e0%a7%9f-%e0%a6%a8%e0%a7%87%e0%a6%a4%e0%a6%be-%e0%a6%8f",
        "url": "http://latestkhobor.com/%e0%a6%b8%e0%a6%be%e0%a6%b0%e0%a6%be%e0%a6%a6%e0%a7%87%e0%a6%b6/%e0%a6%9a%e0%a6%9f%e0%a7%8d%e0%a6%9f%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%ae-%e0%a6%ac%e0%a6%bf%e0%a6%ad%e0%a6%be%e0%a6%97/%e0%a6%b6%e0%a6%bf%e0%a6%ac%e0%a6%bf%e0%a6%b0%e0%a7%87%e0%a6%b0-%e0%a6%95%e0%a7%87%e0%a6%a8%e0%a7%8d%e0%a6%a6%e0%a7%8d%e0%a6%b0%e0%a7%80%e0%a7%9f-%e0%a6%a8%e0%a7%87%e0%a6%a4%e0%a6%be-%e0%a6%8f/",
        "status": "publish",
        "title": "শিবিরের কেন্দ্রীয় নেতা এনামুল চট্টগ্রামে গ্রেফতার",
        "title_plain": "শিবিরের কেন্দ্রীয় নেতা এনামুল চট্টগ্রামে গ্রেফতার",
        "content": "<p style=\"text-align: justify;\"><a href=\"http://latestkhobor.com/wp-content/uploads/2015/02/enamul_224231.jpg\"><img class=\"alignleft size-thumbnail wp-image-57037\" src=\"http://latestkhobor.com/wp-content/uploads/2015/02/enamul_224231-150x150.jpg\" alt=\"enamul_224231.jpg\" width=\"150\" height=\"150\" /></a>নাশকতার অভিযোগে ছাত্রশিবিরের কেন্দ্রীয় কার্যকরী পরিষদের সদস্য এনামুল কবিরকে গ্রেফতার করেছে চট্টগ্রাম মহানগর পুলিশ। শুক্রবার তাকে নগরীর বাকলিয়া থানার বগার বিল এলাকা থেকে গ্রেফতার করে পুলিশ।</p>\n<p style=\"text-align: justify;\">নগর পুলিশের অতিরিক্ত কমিশনার (অপরাধ ও অভিযান) বনজ কুমার মজুমদার গ্রেপ্তারের বিষয়টি নিশ্চিত করেছেন।</p>\n<p style=\"text-align: justify;\">পুলিশ সূত্রে জানা গেছে এ বিষয়ে আরো জানানো হয়, এনামুলের সঙ্গে চট্টগ্রামেরও কয়েকজন শিবিরের নেতাকর্মীকে আটক করা হয়েছে।</p>\n",
        "excerpt": "<p>নাশকতার অভিযোগে ছাত্রশিবিরের কেন্দ্রীয় কার্যকরী পরিষদের সদস্য এনামুল কবিরকে গ্রেফতার করেছে চট্টগ্রাম মহানগর পুলিশ। শুক্রবার তাকে নগরীর বাকলিয়া থানার বগার বিল এলাকা থেকে গ্রেফতার করে পুলিশ। নগর পুলিশের অতিরিক্ত কমিশনার (অপরাধ ও অভিযান) বনজ কুমার মজুমদার গ্রেপ্তারের বিষয়টি নিশ্চিত করেছেন। পুলিশ সূত্রে জানা গেছে এ বিষয়ে আরো জানানো হয়, এনামুলের সঙ্গে চট্টগ্রামেরও কয়েকজন শিবিরের নেতাকর্মীকে &#8230;</p>\n",
        "date": "2015-02-21 15:38:41",
        "modified": "2015-02-21 15:38:41",
        "categories": [
            {
                "id": 960,
                "slug": "%e0%a6%9a%e0%a6%9f%e0%a7%8d%e0%a6%9f%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%ae-%e0%a6%ac%e0%a6%bf%e0%a6%ad%e0%a6%be%e0%a6%97",
                "title": "চট্টগ্রাম বিভাগ",
                "description": "",
                "parent": 11,
                "post_count": 50
            },
            {
                "id": 48,
                "slug": "%e0%a6%ac%e0%a7%8d%e0%a6%b0%e0%a7%87%e0%a6%95%e0%a6%bf%e0%a6%82-%e0%a6%a8%e0%a6%bf%e0%a6%89%e0%a6%9c",
                "title": "breaking",
                "description": "",
                "parent": 0,
                "post_count": 1132
            },
            {
                "id": 11,
                "slug": "%e0%a6%b8%e0%a6%be%e0%a6%b0%e0%a6%be%e0%a6%a6%e0%a7%87%e0%a6%b6",
                "title": "সারাদেশ",
                "description": "",
                "parent": 0,
                "post_count": 1347
            }
        ],

我想显示按类别排序的特定新闻。就像我想向新闻显示 "breaking" 类别中的内容一样。我试过这段代码，但它不正确。

<ion-item class="item-thumbnail-left"  ng-repeat="singleNews in news.posts" href="#/app/singleNews/{{singleNews.id}}">
            <span ng-repeat="cat in singleNews.categories | filter: {title: 'breaking'}">
                <img src="{{singleNews.thumbnail}}">
                <h2 ng-bind-html="singleNews.title"></h2>
                <div ng-bind-html="singleNews.excerpt"></div>
            </span>
 </ion-item>

Answer 1

我做了一个小动作，它奏效了。我刚刚在 ion-item 标签之外写了第一个 ng-repeat。这是离子列表的工作代码

<div ng-repeat="singleNews in news.posts">
  <ion-item class="item-thumbnail-left" ng-repeat="cat in singleNews.categories | filter: {title: 'ক্রিকেট'}" href="#/app/singleNews/{{singleNews.id}}">
     <img src="{{singleNews.thumbnail}}">
     <h2 ng-bind-html="singleNews.title"></h2>
     <div ng-bind-html="singleNews.excerpt"></div>
  </ion-item>
</div>

Answer 2

我认为您需要创建自定义过滤器以获得更好的解决方案。如果标题匹配 {title: 'special'}

将过滤掉

app.filter('filterForTitle',function($filter){
  return function(news, prop1){
    var returnValue = [];
    angular.forEach(news,function(values,index){
      var matchedValue = $filter('filter')(values.categories,{title:'special'},true);
      if(matchedValue.length>0) returnValue.push(values);
    });
    return returnValue;
  }
});

HTML

<ion-item class="item-thumbnail-left" href="#/app/singleNews/{{singleNews.id}}" ng-repeat="singleNews in news.posts|filterForTitle">
    <img src="{{singleNews.thumbnail}}">
    <h2 ng-bind-html="singleNews.title"></h2>
    <div ng-bind-html="singleNews.excerpt"></div>
</ion-item>

Working CodePen

过滤后的数组每次都返回重复值，我认为服务只返回重复值。

为了解决这个问题，我们需要过滤内部 ng-repeat，比如 filter:{title: 'special'}" 那是很奇怪的部分。

从 wordpress 网站解析 json 数据时，嵌套的 ng-repeat 不起作用

Nested ng-repeat is not working while parsing json data from a wordpress website

json

angularjs

angularjs-ng-repeat

ionic-framework