I am trying to iterate following json inside ng-repeat but not working. I would like to get both Ques and img. Below, I have tried "Ques" part but it doesn't display anything.
[{
"Ques": [{
"column1": "3",
"column2": "ok?"
}, {
"column1": "4",
"column2": "test"
}],
"img": [{
"column1": "21",
"column2": "CDH.PNG"
}, {
"column1": "22",
"column2": "Feedback.PNG"
}]
}]
My code given below
var messages = JSON.stringify(response.data);
$scope.messages = JSON.parse(messages);
<div class="list-group-item" ng-repeat="item in messages.Ques">
<h4 class="list-group-item-heading">{{item.column2}}</h4>
<p class="list-group-item-text">{{item.column1}}</p>
</div>
I have done this way. Its working. I can also use "Img" same like below.
<div class="list-group-item" ng-repeat="item in messages">
<div ng-repeat="items in item['Ques']">
<h4 class="list-group-item-heading">{{items.column2}}</h4>
<p class="list-group-item-text">{{items.column1}}</p>
</div>
</div>
Related
Hi I want to assign method name dynamically and use them.Please help.
I am trying something like following.
<div class="dashboard row">
<div class="card col-lg-3" *ngFor="let card of cards">
<h5 class="card-title">{{card.title}}</h5>
<div class="card-body">
<ul style="list-style-type:none;">
<li *ngFor="let cardFeature of cardFeatures" style="padding-left: 7px;">
{{cardFeature.title}}
<button (click)="[cardFeature.method]">{{cardFeature.method}}</button>
</li>
</ul>
</div>
</div>
CardFeatures is an array where I am defining the JSON data and there I am defining my method name so that I can dynamically read call that. But I am unable to achieve the goal.
Please help to resolve the same.
This is what I have in my ts file
cardFeatures = [
{
"name": "id",
"title": "ID",
"enable": true,
"link": "/register",
"method": "meth1()"
},
{
"name": "profile",
"title": "profile",
"enable": true,
"link": "/link1",
"method": "meth2()"
}
]
cards = [
{
title: "Card1"
},
{
title: "Card2"
}]
Try like this:
Working Demo
cardFeatures = [
{
name: "id",
title: "ID",
enable: true,
link: "/register",
method: () => this.meth1()
},
{
name: "profile",
title: "profile",
enable: true,
link: "/link1",
method: () => this.meth2()
}
];
Template:
<div class="card-body">
<ul style="list-style-type:none;">
<li *ngFor="let cardFeature of cardFeatures" style="padding-left: 7px;">
{{cardFeature.title}}
<button (click)="cardFeature.method()">Test</button>
</li>
</ul>
</div>
EDIT:
As per your comment, you can also try this solution
I have a JSON object like the following:
{
"name": "cameraasd_main_autofocus",
"value": "Lasasd autofocus",
"displayName": "Autofocus"
},
{
"name": "screen_siasdze",
"value": "5.2\asd",
"displayName": "Sdascreen Size",
"group": "General"
},
{
"name": "camera_maindas_features",
"value": "Digital Zoom,das Auto Flash, Digital image stabilization"
"displayName": "Features"
},
In this data object I only want to target the element which have the group attribute with ng-repeat. And I have to further group out the elements with a particular group. For example from the whole object the elements with group value "General" should be separated from the rest of the elements.
You can create a scope variable to store the filtered items that have property "group" like below
var data = [{
"name": "cameraasd_main_autofocus",
"value": "Lasasd autofocus",
"displayName": "Autofocus"
},
{
"name": "screen_siasdze",
"value": "5.2asd",
"displayName": "Sdascreen Size",
"group": "General"
},
{
"name": "camera_maindas_features",
"value": "Digital Zoom,das Auto Flash, Digital image stabilization",
"displayName": "Features"
}];
$scope.filteredData = data.filter(function(x){ return x.hasOwnProperty("group")});
and then use ng-repeat in UI
<ul>
<li ng-repeat="item in filteredData">
{{item.name}} || {{item.value}}
</li>
</ul>
Here is a working sample : https://jsfiddle.net/Lt7aP/8267/
Edit : if you want to separate out the elements based on a particular group name then you can try the below code
$scope.filteredData = data.filter(function(x){ return x.hasOwnProperty("group") && x.group == "General"});
in this case only General groups will be displayed.
<div ng-repeat="x in records">
<div ng-if="x.group"> {{x.name}} </div>
</div>
try out if this works!! Good Luck!
Supposing your JSON contains an array (which is not show in your json but i assume it's there).
First, parse your JSON to a JsonObject, then get it as an array
JSONArray jsonArray = new JSONArray(jsonString);
Then you can do this in your html
<div ng-repeat="elem in jsonArray">
<a ng-if="elem.group">{{ elem.property }}</a>
</div>
Check this code.
<div>
<h3>With Group</h3>
<div ng-repeat="d in data">
<div ng-if="d.group">
{{d.name}}
</div>
</div>
</div>
<div>
<h3>Without Group</h3>
<div ng-repeat="d in data">
<div ng-if="!d.group">
{{d.name}}
</div>
</div>
</div>
I have this array of an array of objects that I am pushing onto from results I pass from a modal;
[
[
{
"id": 4,
"name": "THROTTLE TUBE",
"partno": "104-",
"oemnumber": "46019 038",
"stock": 19,
"price": "28"
},
{
"id": 28,
"name": "TACHOMETER, CUP",
"partno": "128-",
"oemnumber": "25012 011",
"stock": 7,
"price": "46"
}
]
]
I am getting this from the following;
$scope.woParts = [];
//later in my modal code - which is where the double [] is coming from
modalInstance.result.then(function(woParts) {
$scope.woParts.push(woParts);
I am then using this ng-repeat in my view;
<div ng-repeat="woPart in woParts">
<div class="col-md-4">
#{{ woPart[$index].name }}
</div>
<div class="col-md-2">
#{{ woPart[$index].oemnumber }}
</div>
<div class="col-md-2">
#{{ woPart[$index].price | currency}}
</div>
<div class="col-md-2">
<input type="number"
class="form-control"
ng-model="partQty">
</div>
</div>
This only displays the first result in the array. Why is that?
Thanks!
I don't think you should push woParts into another object. Just save it to the scope: $scope.woParts = woParts;. Then there is no need to use $index in the ngRepeat, just use regular dot notation: woPart.name.
Or if you have to push woParts into another array, then you can change the ngRepeat expression to woPart in woParts[0].
What I am trying to do is sort some data by field value.
$scope.testarr = [{"id":"1","name":"coffee"},
{"id":"2","name":"tea"},
{"id":"3","name":"coffee"},
{"id":"4","name":"ice coffee"}]
in the html file i have select box and 3 options called coffee, tea and ice coffee,
if i select coffee should be sorted like this
$scope.testarr = [{"id":"1","name":"coffee"},
{"id":"3","name":"coffee"},
{"id":"2","name":"tea"},
{"id":"4","name":"ice coffee"}]
if i select tea should be sorted like this
$scope.testarr = [
{"id":"2","name":"tea"},
{"id":"1","name":"coffee"},
{"id":"3","name":"coffee"},
{"id":"4","name":"ice coffee"}]
i'm trying to use order by but somehow it does't work
<div ng-repeat="item in testarr | orderBy: 'name'">
{{item.id}} ------ {{item.name}}
</div>
It does seem to work. Ensure that your ng-repeat has access to $scope.testarr (i.e. it is being declared on your $scope in the correct controller or directive.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.testarr = [{
"id": "1",
"name": "coffee"
}, {
"id": "2",
"name": "tea"
}, {
"id": "3",
"name": "coffee"
}, {
"id": "4",
"name": "ice coffee"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<div ng-repeat="item in testarr | orderBy: 'name'">
{{item.id}} ------ {{item.name}}
</div>
</div>
</div>
I've got a JSON object with different events that looks like this:
{
"error":false,
"events":[
{
"id":1,
"title":"First entry",
"date":"2014-11-04"
},
{
"id":2,
"title":"Second entry",
"date":"2014-11-04"
},
{
"id":3,
"title":"Third entry",
"date":"2014-11-05"
},
{
"id":4,
"title":"Fourth entry",
"date":"2014-11-06"
},
{
"id":5,
"title":"Fifth entry",
"date":"2014-11-06"
}
]
}
This object is stored in $scope.events in my controller.
Now I'm looping this array to build the list of events:
<ion-list>
<div class="item item-divider">
{{event.date}}
</div>
<a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in events">
<img src="media/thumbnails/{{event.id}}.jpg">
<h1>{{event.title}}</h1>
</a>
</ion-list>
My goal is to display {{event.date}} as a list divider just once for every day. So in this examle it shoudl look like this:
2014-11-04 (divider)
First entry
Second entry
2014-11-05 (divider)
Third entry
2014-11-06 (divider)
Fourth entry
Fifth entry
I'm relly new to ionic & angular and I have no idea how to achieve this. May with some custom filter?
All in all I'm looking for something similar to Angular: Getting list with ng-repeat with dividers / separators but with the date as separator instead of initial letter.
Some ideas?
Any help/tip is really appreciated!
You can use angular.filters (https://github.com/a8m/angular-filter) to group your list by date please see demo below
var app = angular.module('app', ['angular.filter']);
app.controller('homeCtrl', function($scope) {
$scope.data = {
"error": false,
"events": [{
"id": 1,
"title": "First entry",
"date": "2014-11-04"
}, {
"id": 2,
"title": "Second entry",
"date": "2014-11-04"
}, {
"id": 3,
"title": "Third entry",
"date": "2014-11-05"
}, {
"id": 4,
"title": "Fourth entry",
"date": "2014-11-06"
}, {
"id": 5,
"title": "Fifth entry",
"date": "2014-11-06"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.9/angular-filter.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<ion-list ng-repeat="(key, value) in data.events | groupBy: 'date'">
<div class="item item-divider">
<h1> {{key}}</h1>
</div>
<a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in value">
<img src="media/thumbnails/{{event.id}}.jpg">
<h3>{{event.title}}</h3>
</a>
</ion-list>
</div>
I solved this in another SO question here, Ionic Dynamic List Divider. Basically you can modify the list (in the controller, not the source of course) to include the dates. In your view, you notice this and render them as dividers.