AngularJS Фильтр по ID

У меня есть следующий 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>

Как видно из массива, у меня есть один и тот же идентификатор, но DOC_NAME разные, означает, что я хочу показать удостоверение личности один раз, а три изображения должны быть показаны как хорошо. Как я могу это достичь?

Заранее спасибо ...

источник

2015-07-11 MR.Internet

для использования id '{{key}}' перед n-repeat по значению. – Ankita

, пожалуйста, создайте плункер или скрипку? – Vineet

В вашем JSON есть проблема. '' aut_more_info ":" good "," img5733250433.jpeg ",' должно иметь 'doc_name' перед изображением. –

У Вас есть ошибка в вашем 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>

источник

2015-07-11 11:43:12

Спасибо, что был точный ответ –

Я думаю, что есть концептуальная ошибка в вашем JSON (кроме того, замеченный @ A.Alger). Мне нравится уникальность 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, которые показывают, как она работает.

источник

2015-07-11 11:46:10

Я ценю вашу помощь ... –

AngularJS Фильтр по ID

ответ

Смежные вопросы