Question

我想在ng-repeat循环中检索JSON文件中的特定数据，到目前为止我的代码如下，并且它可以正确地引入图像的正确低分辨率URL。我想在<p>标记中显示与其下方特定用户对应的第一条评论，即我想要第一个＆＃34;文字＆＃34;值始终来自用户名＆＃34; tellasaur＆＃34;。不确定如何把它带进来，我可以帮忙吗？谢谢！

NG-REPEAT LOOP

 <li ng-repeat="p in pics">
                        <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
 <p></p>
                    </li>

CONTROLLER

 app.controller('ShowImages', function($scope, InstagramAPI){
    $scope.layout = 'grid';
    $scope.data = {};
    $scope.pics = [];

    InstagramAPI.fetchPhotos(function(data){
      $scope.pics = data;
      console.log(data)
    });
  });

JSON

 "images":{
            "low_resolution":{
               "url":"https:\/\/scontent.cdninstagram.com\/hphotos-xaf1\/t51.2885-15\/s320x320\/e15\/11243658_841091872640638_1858051687_n.jpg",
               "width":320,
               "height":320
            },

         },
 "comments":{
            "count":38,
            "data":[
               {
                  "created_time":"1436314585",
                  "text":"Living on a lake @amarie4107",
                  "from":{
                     "username":"tellasaur",
                     "profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/11142181_1606991566225969_1204610350_a.jpg",
                     "id":"174270894",
                     "full_name":"kristella"
                  },
                  "id":"1024203434844916571"
               },
               {
                  "created_time":"1436317671",
                  "text":"Wow",
                  "from":{
                     "username":"sbcarol2002",
                     "profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/10707061_359756607505353_826681437_a.jpg",
                     "id":"1280059782",
                     "full_name":"Susan Long"
                  },
                  "id":"1024229322726738700"
               },
               {
                  "created_time":"1436320519",
                  "text":"\ud83d\udc93 dreamyy",
                  "from":{
                     "username":"veekster",
                     "profile_picture":"https:\/\/igcdn-photos-h-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/11117059_1743047859255223_204225114_a.jpg",
                     "id":"31179150",
                     "full_name":"Victoria Wright"
                  },
                  "id":"1024253210688915485"
               }

            ]
         }

Answer 1

以下是使用过滤器进行此操作的一种方法。

＆＃13;

angular.module('app',[])
.filter('getFirstCommentFrom',function(){
  return function(arr, user){
    for(var i=0;i<arr.length;i++)
    {
      if(arr[i].from.username==user)
        return arr[i].text;
    }
    return '';
  }
})
.controller('TestCtrl', function($scope){
  $scope.pics = [
    { "images":{
            "low_resolution":{
               "url":"https:\/\/scontent.cdninstagram.com\/hphotos-xaf1\/t51.2885-15\/s320x320\/e15\/11243658_841091872640638_1858051687_n.jpg",
               "width":320,
               "height":320
            },

         },
 "comments":{
            "count":38,
            "data":[
               {
                  "created_time":"1436314585",
                  "text":"Living on a lake @amarie4107",
                  "from":{
                     "username":"tellasaur",
                     "profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/11142181_1606991566225969_1204610350_a.jpg",
                     "id":"174270894",
                     "full_name":"kristella"
                  },
                  "id":"1024203434844916571"
               },
               {
                  "created_time":"1436317671",
                  "text":"Wow",
                  "from":{
                     "username":"sbcarol2002",
                     "profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/10707061_359756607505353_826681437_a.jpg",
                     "id":"1280059782",
                     "full_name":"Susan Long"
                  },
                  "id":"1024229322726738700"
               },
               {
                  "created_time":"1436320519",
                  "text":"\ud83d\udc93 dreamyy",
                  "from":{
                     "username":"veekster",
                     "profile_picture":"https:\/\/igcdn-photos-h-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/11117059_1743047859255223_204225114_a.jpg",
                     "id":"31179150",
                     "full_name":"Victoria Wright"
                  },
                  "id":"1024253210688915485"
               }

            ]
         }
     }
  ]
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
  <li ng-repeat="p in pics">
    <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
    {{p.comments.data|getFirstCommentFrom:'tellasaur'}}
  <p></p>
  </li>
</div>

＆＃13;

检索ng-repeat循环angularjs中的特定数据

1 个答案: