AngularJS通过ID过滤
AngularJS Filter by ID
我有以下Json_encode FRom PHP Response…
[
{"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一次,但三个图像也应该显示。我怎样才能做到呢?
你的JSON中有一个错误,你丢失了一个属性名。
砰砰作响。
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>
我认为你的JSON中有一个概念错误(除了@ a.a alger注意到的那个)。我喜欢ID的唯一性例如,在一个简单的数据库表中,每个select
只显示一次ID(主键)。如果进行某些连接操作,则该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"
}]
}]
通过这种方式,文档自然地分组在一起,你可以不需要任何插件就可以使用你的angular:
<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>
这是一个活塞,说明它是如何工作的。
相关文章:
- jquery对标记类型和id进行过滤
- Strongloop环回:根据相关模型的id进行过滤
- 如何在 onActiveCellChanged 事件中从过滤的光滑网格中获取正确的行 ID
- 在主干网中过滤的 ID 数组上使用 .set
- AngularJS 过滤器:将具有唯一 ID 的对象过滤到单独的对象中
- 通过ID工作进行ng重复跟踪,如何在ng重复中过滤
- 基于 id Angularjs 过滤嵌套的 JSON 数据
- 如何使用jQuery-ajax在JSON文件中传递id,只带来过滤后的数据
- AngularJS-如何过滤一堆特定的ID
- 通过id过滤数组angularjs的数组
- 自定义正则表达式过滤掉最后一个url路径中的ID
- Angular通过friends内部的friend.brand.id进行过滤可以工作,但不能使用'undefin
- 过滤您的类型,搜索名称的Div ID
- 如何在angularjs中基于ID过滤结果
- 通过id字段过滤数组列表到一个新变量
- 通过id数组过滤角度数据
- 如何在javascript中过滤基于id的HTML图像
- AngularJS通过ID过滤
- 无法过滤唯一ID's
- Backbone.js:如何通过模型ID数组过滤对象集合