i'm trying to order alphabetically my list by the key and i'm having problems with that.
i tried to add " | orderBy 'key'" BUT IT DIDIN'T WORK, ANY SUGGESTION?
my html:
<label for="select-aspects" class="col-lg-1 col-md-1 col-sm-1 control-label">UMS:</label>
<div class="col-lg-5 col-md-5 col-sm-5">
<select data-smart-select2
multiple
data-ng-options="key as key for (key, value) in vm.umsAspects "
data-ng-disabled="!vm.currentProduct.adoptedListings[vm.currentListingPosition].agentDecisionContract.action || vm.currentProduct.adoptedListings[vm.currentListingPosition].agentDecisionContract.reason!='Aspects'"
ng-required="vm.currentProduct.adoptedListings[vm.currentListingPosition].agentDecisionContract.reason=='Aspects'"
style="width: 100%;"
ng-model="vm.currentProduct.adoptedListings[vm.currentListingPosition].agentDecisionContract.reasonAspects"
class="select2"
id="select-aspects">
</select>
</div>
my list looks like this:
{ Brand: {umsValues: Array(543), multiValue: true, aspectRequired:
true}, UPC: {umsValues: Array(543), multiValue: true, aspectRequired:
true} Model: {umsValues: Array(543), multiValue: true, aspectRequired:
true}, Type: {umsValues: Array(543), multiValue: true, aspectRequired:
true} }
in this case i want to display it in the following order:
Brand
Model
Type
UPC
Related
hope someone can help me I'm working on this since 2 days. I have the following Data in my component:
var types = [
{
**required**: true,
agreements: [
{ selected: true, desc: 'red' },
{ selected: false, desc: 'green'}
]
},
{
required: false,
agreements: [
{ selected: false, desc: 'red' },
{ selected: false, desc: 'green'}
]
},
];
I want to validate all the checkboxes (they have v-model on this selected attributes here!), to be checked, if the parent value required (see my data required!) is true. My Validations looks like this but I miss a last little bit of help to get this required value into my validator selected requiredIf function.
validations: {
types: {
$each: {
agreements: {
$each: {
selected: {
requiredIf: (value) => value === value.parent.required
}
}
}
}
}
}
Hope you understand me right. My Template looks like this:
<div class="mb-3" v-for="type in agreementTypes" :key="type.id">
<h3 class="text-primary">{{ type.displayName }}</h3>
<ul class="list-unstyled">
<li v-for="agreement in type.agreements" :key="agreement.id">
<p>{{ agreement.description }}</p>
<div class="mb-3 form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
:checked="agreement.active"
:id="agreement.id"
:required="agreement.required"
v-model="agreement.selected"
/>
<label class="form-check-label" for="agreements">{{ agreement.label }}<span v-if="agreement.required">**</span></label>
</div>
</li>
</ul>
</div>
Any Help will be apreshiated!
bye,
Marcel
I have this json:
[
{"country" : "Afghanistan","city" : "Kabul"},
{"country" : "Albania","city" : "Tirana"},
{"country" : "Algeria","city" : "Alger"},
And I want to have a select that when choosing a country, I get the city displayed
My service:
getCountries(name?: string, city?: string, expectancy?: string, polulation?: string, government?: string) {
let cities = this.http.get('assets/capitals.json'); -> this is the one called
let language = this.http.get('assets/languages.json');
return forkJoin([cities, language]);
}
Component:
ngOnInit() {
this.weatherService.getCountries()
.subscribe(dataList => {
this.cities = dataList[0]
console.log(this.capitals)
this.population = dataList[1]
console.log(this.cities, this.population)
})
}
onChange(deviceValue) {
console.log(deviceValue)
}
View:
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<select (change)="onChange($event.target.value)" class="form-control">
<option style="color:black" *ngFor="let c of cities" value="{{c.country}}">{{c.country}}</option>
</select>
</div>
</div>
</div>
It sounds very simple but something is missing. If it were an API I would pick up the select value and make another call with that value on url, but like this, how can I achieve it?
Your function is logging the value of the "select" component which in your case happens to be the country. If you want to display the country but use the city as the value, you simply change the following in the HTML:
<select (change)="onChange($event.target.value)" class="form-control">
<option style="color:black" *ngFor="let c of cities" value="{{c.city}}">{{c.country}}</option>
</select>
Using the above, the country will be displayed but your "onChange" function will log the city value. If you wish to do something else with the city value, you can do so in your onChange function.
Using ng-repeat am showing array of values which am getting it from backend. But i want to split the specific values using comma seperated and displya it dynamically.
Please find the HTML code below.
<li ng-repeat="history in claimGroupingHistories">
<div class="row">
<div class="col-lg-4 col-md col-sm-4 col-xs-4">
<label>{{'claimgroup.history.oldvalueselected'|translate}}:</label>
</div>
<div id="historyOldValueSelected_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.oldValueSelected}}</div>
</div>
</div>
</li>
Here, in the {{history.oldValueSelected}} values will be like ABC1234, XYZ2345, IJK098. Instead of showing the value in single line. I want to split the value using comma seperated and display the value.
For Example :
Now, it showing like,
Old Value Selected : ABC1234, XYZ2345, IJK098
Expecting output like,
Old Value Selected : ABC1234
XYZ2345
IJK098
Splitting the array values dynamically using comma seperated.
Testdata :
[
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":null,
"newValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-22T18:42:59.000Z"
},
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
"newValueSelected":"Group by minimum claims",
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-23T06:13:07.000Z"
},
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":"Group by minimum claims",
"newValueSelected":"Group by minimum claims, Customer Invoice No",
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-23T06:14:54.000Z"
},
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":"Group by minimum claims, Customer Invoice No",
"newValueSelected":null,
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-24T06:23:33.000Z"
},
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":null,
"newValueSelected":"Customer Invoice No, Group by minimum claims",
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-24T06:23:58.000Z"
}
]
I am assuming history.oldValueSelected is a string, because if oldValueSelected was an array you could use ng-repeat like this:
<div layout="column">
<span ng-repeat="oldValue in history.oldValueSelected" ng-bind="oldValue"></span>
</div>
Now to oldValueSelected being a string. I can think of two options: You can either
split the values in the controller after you got your data
split it in ng-repeat
If you choose the second option, you can do the following:
<div layout="column">
<span ng-repeat="oldValue in history.oldValueSelected.split(', ')" ng-bind="oldValue"></span>
</div>
EDIT: I didn't get the expected output when I used class="row"
<li ng-repeat="history in $ctrl.histories">
<!-- class="row" didn't deliver the expected output-->
<div layout="row">
<div class="col-lg-4 col-md col-sm-4 col-xs-4">
<!-- For testing purposes - replace with your code-->
<label>{{history.name}}:</label>
</div>
<div layout="column">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" ng-repeat="oldValue in history.oldValueSelected.split(', ')">{{oldValue}}</div>
</div>
</div>
</li>
In the controller for testing purposes:
this.histories = [
{name: "number 1", oldValueSelected:"ABC1234, XYZ2345, IJK098"},
{name: "number 2", oldValueSelected:"ABC1234, IJK098"},
{name: "number 3", oldValueSelected:"IJK098"}
];
app.component.html
<div *ngFor="let hero of heroes.split(', ')">
{{ hero }}
</div>
app.component.ts
private heroes: string = "123123, 123123, 345354, 5675757";
Output:
123123
123123
345354
5675757
I'm working on an angular 4 project calling a json through a service, everything works very well exept for a single thing, my json has the following simplified structure for understanding the problem:
{
"animals" [
{
"name" : "dog"
"subgroup": "vertebrate"
"class" : "mammal"
},
{
"name" : "pig"
"subgroup": "vertebrate"
"class" : "mammal"
},
{
"name" : "cat"
"subgroup": "vertebrate"
"class" : "mammal"
},
{
"name" : "snake"
"subgroup": "vertebrate"
"class" : "reptile"
},
{
"name" : "lizzard"
"subgroup": "vertebrate"
"class" : "reptile"
},
{
"name" : "crocodile"
"subgroup": "vertebrate"
"class" : "reptile"
},
]
}
and i want to iterate ONLY the objects with the "class" : "reptile"
i made this structure:
<div class="col-12 mb-3" *ngFor="let reptiles of animals">
<div *ngIf = "reptiles.class == reptile">
<div class="row">
<div class="col-12">
<h5 class="py-3 bg-dark text-white pl-3 mx-0 mb-3">{{reptiles.name}}</h5>
<p class="py-3 bg-dark text-white font-weight-light pl-3 m-0">{{reptiles.class}}</p>
</div>
</div>
</div>
</div>
but what happens is that it iterates three empty
<div class="col-12 mb-3" *ngFor="let reptiles of animals">
</div>
corresponding to the mammals, and i want that objects not to iterate at all, i want to iterate only the objects with the class "reptile".
how can i achieve that?
The easy fix is to use ng-container instead of a div to iterate:
<ng-container *ngFor="let reptiles of animals">
<div class="col-12 mb-3" *ngIf="reptiles.class == reptile">
<div>
<!-- ... -->
</div>
</div>
</ng-container>
Of course the template still iterates over these entries now, but it will not create any DOM node for it whatsoever (the magic of ng-container).
Possibly a better fix would be to instead filter in your component and only pass the data you want to display to the template:
// In your controller after receiving the animals data:
this.reptiles = this.animals.filter(a => a.class === "reptile");
// Template
<div *ngFor="let reptile of reptiles">...</div>
You can also write a filterBy pipe or take one from an existing library such as ngx-pipes. But beware that Angular discourages that as it easily becomes a performance pitfall.
I think that you can use this solution
Just filter by class property:
filterItemsOfType(type){
return this.items.filter(x => x.class == type);
}
Cheers,
#carlosrojas_o
you just need to filter your data in component like this:
this.filteredAnimals = this.animals.filter(animal => animal.class === "reptile"); // now use filteredAnimals in html template
Hope it will help
I am using the AngularDynamicform to generate a dynamic form in page and the fields are displaying fine in a horizontal manner. But I want to display the input fields with in different sections in the page.
In my page
<div class="box-content">
<h4 class="page-header">New Contact</h4>
<dynamic-table-form fields="fields" data="data" class="form-horizontal">
<input dynamic-field-type="string" ng-model="value" type="text" maxlength="{{config.maxLength}}" size="{{config.maxLength}}">
<input dynamic-field-type="date" ng-model="value" type="date">
<ul dynamic-field-type="array">
<li dynamic-field-child>
<ng-transclude></ng-transclude>
<button ng-click="removeChild(childKey)">Remove</button>
</li>
<button ng-click="addChild()">Add Another</button>
</ul>
<select dynamic-field-type="select" ng-model="value" ng-options="option.value as option.caption for option in config.options"></select>
<input dynamic-field-type="integer" ng-model="value" type="number" size="{{config.maxLength}}" maxlength="{{config.maxLength}}" min="{{config.minValue}}" max="{{config.maxValue}}">
<button ng-click="create()">Save</button>
</dynamic-table-form>
<button ng-click="create()">save</button>
And in my controller
$scope.fields = [
{
caption: 'Name',
model: 'name',
type: 'string',
maxLength: 25
},
{
caption: 'Date of Birth',
model: 'dateOfBirth',
type: 'date'
},
{
caption: 'Employee name',
model: 'employee.name',
type: 'string',
maxLength: 25
},
{
caption: 'Employee City',
model: 'employee.city',
type: 'string',
maxLength: 25
}
];
for example, I want to display the last two fields(Employee name & Employee City)in other section called Employee details. How can I do it?
Thanks in advance.