So i'm trying to filter my ng-repeat directive by using angular unique module.. but i'm kinda lost, i followed the exact order with adding the scripts... In console i'm getting an error, 'No module: ui.utils'..
Here is my Plunker: http://plnkr.co/edit/cKJgtGyYeQdQCyARXG7j?p=preview
From this code:
<ul>
<li>nokia</li>
<li>nokia</li>
<li>samsung</li>
</ul>
i should get with -unique- this code:
<ul>
<li>nokia</li>
<li>samsung</li>
</ul>
Some good people here helped me already by using jQuery filter, but i think this is much better way of doing this..
Any help is much appreciated..
You can use 'unique'(aliases: uniq) filter in angular.filter module (https://github.com/a8m/angular-filter)
usage: colection | uniq: 'property'
you can filter by nested properties to : colection | uniq: 'property.nested_property'
So you can do something like that..
function MainController ($scope) {
$scope.orders = [
{ id:1, customer: { name: 'foo', id: 10 } },
{ id:2, customer: { name: 'bar', id: 20 } },
{ id:3, customer: { name: 'foo', id: 10 } },
{ id:4, customer: { name: 'bar', id: 20 } },
{ id:5, customer: { name: 'baz', id: 30 } },
];
}
HTML: We filters by customer id, i.e remove duplicate customers
<th>All customers list: </th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
<td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>
result:
All customers list:
foo 10
bar 20
baz 30
Related
Im using this plugin to create a smart table in angualar 2:
https://akveo.github.io/ng2-smart-table/#/documentation
I need to customize the table.
ie) Only when user clicks on 'Create' link, the event should be trigerred, for which their documentation says:
'create' event : Triggered once a Create button clicked. Triggered only if table mode = external.
need to know how to set the mode external as I couldnt find anywhere in their doc.
As of now i am using like:
<ng2-smart-table [settings]="settings" [source]="source" (userRowSelect)="onUserRowSelect($event)" class="table table-hover table-striped"></ng2-smart-table>
onUserRowSelect(event): void {
//But this event triggers whenever(wherever in the table) user clicks, which is dont want !
}
Suggestion required!
1) set settings object of ng2-smarttable as below
settings = {
mode: 'external',
add: {
addButtonContent: '<i class="ion-ios-plus-outline"></i>',
createButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
},
edit: {
editButtonContent: '<i class="ion-edit"></i>',
saveButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
},
delete: {
deleteButtonContent: '<i class="ion-trash-a"></i>',
confirmDelete: true
},
columns: {
id: {
title: 'ID',
type: 'number'
},
name: {
title: 'Name',
type: 'string'
},
lastName: {
title: 'Last Name',
type: 'string'
},
username: {
title: 'Username',
type: 'string'
},
email: {
title: 'E-mail',
type: 'string'
},
age: {
title: 'Age',
type: 'number'
}
}
};
2) in html page define setting and source
<ng2-smart-table [settings]="settings" [source]="source" (create)="openCreateDialog($event)"></ng2-smart-table>
you can perform any action which you want on create button click.
define the openCreateDialog function in your ts file as below
openCreateDialog(event) {
//logic
}
I achieved by using (createConfirm) event of theirs like:
<ng2-smart-table [settings]="view_update_items_settings" [source]="source" (createConfirm)="onCreateConfirm($event)" class="table table-hover table-striped"></ng2-smart-table>
in .ts file:
onCreateConfirm(event) {
...
}
I try to add permalinks to my angular 2 app, but I didn't find a way yet.
My app-routing.module.ts:
const routes: Routes = [
{ path: '', pathMatch: 'full', component: TagelerComponent },
{ path: 'tageler', component: TagelerListComponent },
{ path: 'tageler-details/:id', component: TagelerDetailsComponent },
{ path: 'group/:id', component: GroupDetailsComponent },
{ path: 'tageler/admin', component: AdminComponent },
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
And my code looks like this:
<div *ngFor="let group of groups | groupTypeFilter: 'Trupp' ">
<a routerLink="/group/{{group._id}}">
<li class="list-group-item">
{{group.name}}
</li>
</a>
</div>
In this example the URL is something like: http://localhost:4200/group/5910c2282249261cc61d0a7e
Instead of the group id, I would like to display the name of the group (e.g. dogs) without changing the routing, so the URL changes to: 'http://localhost:4200/group/dogs'.
I'm new to Angular 2, so I don't really know whether this is actually possible.
I would be glad if someone could help me!
The answer is you can not replace the id with the name in the routerLink, and then query the group by id, assume a user opened a new tab and entered the URL
http://localhost:4200/group/dogs
The app will load and the only reference you have is dogs, where will the id come from? unless you have already defined a dictionary that returns the id of the given group name, or by using some black magic
However in case you only let the user to access the detail page through its parent, then you can pass the group instance by using a shared service and set the router link to group.name.
<div *ngFor="let group of groups | groupTypeFilter: 'Trupp' ">
<a [routerLink]="shared.setGroupLink(group)">
<li class="list-group-item">
{{group.name}}
</li>
</a>
</div>
constructor(public shared: SharedService) { }
in SharedService
export class SharedService{
currGroupId: number;
constructor() { }
setGroupLink(group) {
// you can pass the object as a whole but I'll use `group.id` in this example
// this.currGroup = group;
this.currGroupId = group.id;
return '/group/' + group.name;
}
}
In GroupDetailsComponent
groupId: number;
constructor(public shared: SharedService) { }
ngOnInit() {
this.groupId = this.shared.currGroupId;
}
NOTE: this approach will not work if the user entered http://localhost:4200/group/dogs because groupId is undefined
by the way, avoid prefixing your variables' names with the underscore _, check Angular Style Guide
I am new at this correct me if I'm wrong . I want to take the name data from the input with ng-model but i cant take the data at the onTap: function. I tried to alert $scope.name but it is empty doesnt work,then i tried $scope.name="" empty at the init but it doesnt change when the user writes his name.How can i get the name .Thank you.
`$scope.data = {
model: "Choose",
availableOptions: [
{id: '1', name: 'dummyText1'},
{id: '2', name: 'dummyText2'},
{id: '3', name: 'dummyText3'}
]
};`
var myPopup = $ionicPopup.show({
template:
'<div class="list list-inset">' +
'</label><label class="item item-input"><i class="icon ion-person placeholder-icon"></i>' +
'<input type="text" placeholder="Your name.." ng-model="name"></label>' +
'</div>' ,
title: 'Profile',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if ($scope.name != null) {
alert($scope.name);
e.preventDefault();
} else {
alert($scope.name);
}
}
}
]
});
here is the popup screenshot
Thank you again
I figured out with adding ng-change="foo(data)" to input ,now im able to use this data at scope .
Thank you.
I'm trying to sort an array and not having much luck. If I remove the helper I print out the all the qualifications in the order they went into the database. I would like to display them chronologically based on their startDate.
Path: dbExample
"profile": {
"CV": {
"education": [
{
"qualification": "Arts Degree",
"startDate": "2009-01-01T00:00:00.000Z",
"endDate": "2013-12-01T00:00:00.000Z"
},
{
"qualification": "Science Degree",
"startDate": "2007-01-01T00:00:00.000Z",
"endDate": "2008-12-01T00:00:00.000Z"
}
]
}
}
Path: education.html
<template name="education">
{{#each educationHistory}}
<div class="box">
<p class="title">{{qualification}}</p>
<p class="dates">{{startDate}} - {{endDate}}</p>
</div>
{{/each}}
</template>
Path: education.js
Template.education.helpers({
educationHistory: function () {
return Meteor.users.find({}, {sort: {"startDate": 1}});
}
});
Path: Schema.js
Schema.Education = new SimpleSchema({
qualification: {
type: String,
optional: true
},
startDate: {
type: Date,
optional: true
},
endDate: {
type: Date,
optional: true
}
});
Schema.CV = new SimpleSchema({
education: {
type: [Schema.Education],
optional: true
}
});
This is a little hard to follow because I don't know the context of the template or which user's education history to use. Here are a couple of solution ideas:
solution 1
Template.education.helpers({
educationHistory: function () {
// replace Meteor.user() with Meteor.users.findOne(someId) or something
const { education } = Meteor.user().profile.CV;
return _.sortBy(education, e => e.startDate);
},
});
This returns an array of education objects, sorted by startDate.
solution 2
If the template already has an educationHistory without the helper (based on your comments below), then you can replace the educationHistory helper with this:
Template.education.helpers({
sortByStartDate: function (education) {
return _.sortBy(education, e => e.startDate);
},
});
Then in your template:
<template name="education">
{{#each sortByStartDate educationHistory}}
<div class="box">
<p class="title">{{qualification}}</p>
<p class="dates">{{startDate}} - {{endDate}}</p>
</div>
{{/each}}
</template>
I'm learning about ember/ember-data and would like to fetch some data from server and order it.
My json data is something like
{
'ninjas': [
{ id: '1', name: 'Ninja 1', age: 23},
{ id: '2', name: 'Ninja 2', age: 27},
{ id: '3', name: 'Ninja 3', age: 22}
],
'clans': [
{ id: '1566', title: 'Foot Clan', ninja_ids: ['1', '2']},
{ id: '8941', title: 'Hand Clan', ninja_ids: ['3']}
]
}
The templates are
<script type="text/x-handlebars" data-template-name="clans">
<div>Clans</div>
<ul>
{{#each controller}}
<li>
{{#link-to 'clan' this}}{{title}}{{/link-to}}
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="clan">
<div>{{title}}</div>
{{#each fetchedNinjas}}
<ul>
<li>{{fetchedNinjas}}</li>
</ul>
{{/each}}
</script>
Here is the basic App script:
var App = Ember.Application.create();
App.AplicationStore = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.create({})
});
App.Router.map(function() {
this.resource('ninjas');
this.resource('clans');
this.resource('clan', {path: 'clans/:clan_id'});
});
The ninja script is here:
App.Ninja = DS.Model.extend({
name: DS.attr('string'),
age: DS.attr('number'),
clans: DS.hasMany('clan')
});
App.NinjasRoute = Ember.Route.extend({
model: function (params, transition, queryParams) {
return this.store.find('ninja');
}
});
Here is the Clan Model, ClansRoute, ClanRoute
App.Clan = DS.Model.extend({
title: DS.attr('string'),
ninjas: DS.hasMany('ninja', {async: true})
});
App.ClansRoute = Ember.Route.extend({
model: function (params, transition, queryParams) {
return this.store.find('clan');
}
});
App.ClanRoute = Ember.Route.extend({
model: function (params, transition, queryParams) {
return this.store.find('clan', params.clan_id);
}
});
I think that I should get the related ninja data on ClanController and then order it, but I don't know how to proceed.
App.ClanController = Ember.ObjectController.extend({
fetchedNinjas: function () {
//should I use a promise here?
}.property('ninjas')
});