2015-07-11 49 views
1

過濾器,我有以下Json_encode從PHP響應...AngularJS通過ID

[ 
{"ID":"149","IDusr":"4","aut_more_info":"good","doc_name":"img1838142879.jpeg","doc_type":"jpg"},{"ID":"149","IDusr":"4","aut_more_info":"good","img5733250433.jpeg","doc_type":"jpg"},{"ID":"149","IDusr":"4","aut_more_info":"good","doc_name":"img1230306801.jpg_doc","doc_type":"jpg"} 
] 

我已經嘗試了https://github.com/a8m/angular-filter插件。這是我的代碼。

<div ng-repeat="(key, value) in Detail | groupBy: 'ID'"> 
     <div ng-repeat="aut in value"> 

      <div class="item item-avatar bar bar-calm"> 
       <h2>{{aut.name}} {{aut.model}}</h2> 
      </div> 
      <div class="item item-avatar"> 
       <img src="../www/img/icon/{{aut.doc_name}}"> 
      </div> 
</div> 
</div> 

正如你從陣列看到,我有相同的ID,但DOC_NAME是不同的,意味着我要一次顯示ID,但是這三個形象應顯示爲好。我怎樣才能做到這一點?

在此先感謝...

+0

id在n值重複前使用'{{key}}'。 – Ankita

+1

你會創造一個蹲式或小提琴嗎? – Vineet

+0

您的JSON存在問題。 ''aut_more_info「:」好「,」img5733250433.jpeg「,'圖像前應該有'doc_name'。 –

回答

2

因此你缺少一個屬性名稱您的JSON錯誤。

Plunker

angular.module('foo', ['angular.filter']) 

.controller('bar', ['$scope', function($scope){ 


    $scope.Detail = [ 
    { 
     "ID"   : "149", 
     "IDusr"   : "4", 
     "aut_more_info" : "good", 
     "doc_name"  : "img1838142879.jpeg", 
     "doc_type"  : "jpg" 
    }, 
    { 
     "ID"   :"149", 
     "IDusr"   :"4", 
     "aut_more_info" :"good", 

     // you were missing the property name 'doc_name' here... 
     "doc_name"  :"img5733250433.jpeg", 
     "doc_type"  :"jpg" 

    }, 
    { 
     "ID"   :"149", 
     "IDusr"   :"4", 
     "aut_more_info" :"good", 
     "doc_name"  :"img1230306801.jpg_doc", 
     "doc_type"  :"jpg" 
    } 
    ]; 

}]); 

而且你似乎在試圖渲染性能沒有在你的JSON數據存在價值

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 

    </head> 

    <body ng-app="foo"> 



    <div ng-controller="bar"> 

     <div ng-repeat="(key, value) in Detail | groupBy: 'ID'"> 

     <div ng-repeat="aut in value"> 

      <div class="item item-avatar bar bar-calm"> 

       <!-- you don't have properties name or model in your json --> 
       <h2>{{aut.name}} {{aut.model}}</h2> 
      </div> 

      <div class="item item-avatar"> 
       <img src="../www/img/icon/{{aut.doc_name}}"> 
      </div> 
     </div> 
    </div> 

    </div> 




    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 

    <script src="script.js"></script> 
    </body> 

</html> 
+0

謝謝你的確切答案 –

2

我覺得有一個在你的JSON一個概念上的錯誤(除了一個由@注意A.Alger)。 我喜歡唯一性的ID。例如,在一個簡單的數據庫表中,您的ID(主鍵)每個select顯示一次。如果您進行一些連接操作,那麼ID可以出現多次。這是很好的,因爲數據庫表(和select)缺乏表現力是JSON確實有,所以我會回到這樣一個JSON:

[{ 
    "ID": "149", 
    "IDusr": "4", 
    "aut_more_info": "good", 
    "docs": [{ 
    "doc_name": "img1838142879.jpeg", 
    "doc_type": "jpg" 
    }, { 
    "doc_name": "img5733250433.jpeg", 
    "doc_type": "jpg" 
    }, { 
    "doc_name": "img1230306801.jpg", 
    "doc_type": "jpg" 
    }] 
}] 

這樣的文件自然組合在一起,你可以用你的沒有任何插件的角度:

<div ng-repeat="user in users"> 
    ID: {{user.ID}} - IDusr: {{user.IDusr}} 
    <h5>Images</h5> 
    <div ng-repeat="doc in user.docs"> 
     {{doc.doc_name}} <br> 
     {{doc.doc_type}} 
     <hr> 
    </div> 
    </div> 

這是一個plunker顯示它如何工作。

+1

我感謝你的幫助... –