currently I have the problem to not be able to display some data in a dropdown. I want to create two different components in which the dropdowns could be. In one of them the dropdown is displayed properly, in the other I'm not able to make it running.
Here a small code snippet - I hope this is enough.
Working example:
component.html
<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
<option *ngFor="let entity of (entities | dropdownData: filter.name) | async">{{entity.name}}</option>
</select>
In the ts I have following line in ngOnInit:
this.entities.subscribe(val => console.log(val));
Which gives the following output in console:
{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object
Not working example:
<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
<option *ngFor="let item of (field.data | dropdownData : field.name) | async">{{item.name}}</option>
</select>
In the ts I have following line in ngOnInit:
field.data.subscribe(val => console.log(val));
Which prints the following output in console:
{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object
So the console prints the same result twice. Hope you can help me.
Appreciate it!
Fr34k
Your error is that you are chaining wrong the pipes.
Check the following resource:
https://angular.io/guide/pipes#chaining-pipes
You should apply first: async and then dropdownData: filter.name
Your code should be like this:
component.html
<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
<option *ngFor="let entity of entities | async | dropdownData: filter.name">{{entity.name}}</option>
</select>
another component
<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
<option *ngFor="let item of field.data | async | dropdownData : field.name">{{item.name}}</option>
</select>
Check if works with that change.
This question already has answers here:
How do I set the value property in AngularJS' ng-options?
(27 answers)
Closed 3 years ago.
I'm having an issue getting just the value from a dropdown. I have the following structure:
$scope.categories = [
{id: 7, title: 'Peanut Butter'},
{id: 4, title: 'Mustard'},
{id: 3, title: 'Jelly'},
{id: 2, title: 'Jam'},
{id: 1, title: 'Mint Jelly'}
];
and I'm creating a dropdown as follows:
<select class="form-control" ng-model="testme.id" ng-options="c as c.title for c in categories track by c.id">
<option value="">------</option>
</select>
<input type="text" ng-model="testme.pos" />
The dropdown generates fine
For example, if I put in "3" into "testme.pos" and select "Jam", but the model "testme" comes with the following example result:
{id: {id: 2, title: 'Jam'}, pos: 3 },
What I would like to see:
{id: 2, pos: 3}
Any help would be great. I created a plnkr: Select Help
Instead of ng-model="testme.id" use ng-model="testme"
I'm trying to sort a string[] in descending way. So far what I have done is the code below:
let values = ["Saab", "Volvo", "BMW"]; // example
values.sort();
values.reverse();
It's working but I'm trying to figure out if there is a better way to do it.
You need to create a comparison function and pass it as a parameter of sort function:
values.sort((one, two) => (one > two ? -1 : 1));
A more current answer is that you can utilize String.prototype.localCompare() to get a numeric comparison value
Simple example:
let values = ["Saab", "Volvo", "BMW"];
values.sort((a, b) => b.localeCompare(a))
This also wont causes TypeScript warnings as the output of localCompare is a number
More info and additional function parameters can be seen here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
Use the following code to sorting the Array in ascending and descending order.
const ascending: any= values.sort((a,b) => (a > b ? 1 : -1));
const descending: any= values.sort((a,b) => (a > b ? -1 : 1))
The most recent lib that I know
https://www.npmjs.com/package/ngx-pipes
const numbers = [2, 1, 3];
const obj = [
{id: 4, name: 'Dave', amount: 2},
{id: 2, name: 'Michael', amount: 2},
{id: 3, name: 'Dan', amount: 1},
{id: 1, name: 'John', amount: 1}
];
const deepObj = [
{id: 1, name: 'John', amount: 1337, deep: {prop: 4}},
{id: 2, name: 'Michael', amount: 42, deep: {prop: 2}},
{id: 3, name: 'Dan', amount: 1, deep: {prop: 1}},
{id: 4, name: 'Dave', amount: 2, deep: {prop: 3}}
];
<!-- Returns array ordered by value -->
<p>{{ numbers | orderBy }}</p> <!-- Output: [1, 2, 3] -->
<p>{{ numbers | orderBy: '-' }}</p> <!-- Output: [3, 2, 1] -->
<!-- Returns array ordered by value of property -->
<p>{{ deepObj | orderBy: 'amount' }}</p>
<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-amount' }}</p>
<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->
<!-- Returns array ordered by value of deep property -->
<p>{{ deepObj | orderBy: 'deep.prop' }}</p>
<!-- Output: [{id: 3, ...}, {id: 2, ...}, {id: 4, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-deep.prop' }}</p>
<!-- Output: [{id: 1, ...}, {id: 4, ...}, {id: 2, ...}, {id: 3, ...}] -->
<!-- Returns array ordered by mutliple properties -->
<p>{{ obj | orderBy: ['amount', 'id'] }}</p>
<!-- Output: [{id: 1, ...}, {id: 3, ...}, {id: 2, ...}, {id: 4, ...}] -->
Must be like this programmatically
#Component({
// ..
providers: [OrderByPipe]
})
export class AppComponent {
constructor(private orderByPipe: OrderByPipe){
let values = ["Saab", "Volvo", "BMW"];
this.orderByPipe.transform(values, '-');
}
}
This is normal reverse sorting
var nums:number[] = [1,2,3,4]
nums.sort((a,b)=> a < b ? 1:-1)
[ 4, 3, 2, 1 ]
If you have to do the sorting of custom objects, try this
class Student{
name:String
marks:Number
constructor(name:string, marks:number) {
this.name = name
this.marks = marks
}
}
var students:Array<Student> = [
new Student("aseem",47),
new Student("prem",97),
new Student("john",100)
]
console.log(students.sort( (a,b)=> a.marks > b.marks ? -1:1 ))
would result in sorting by marks in reverse order
/usr/local/bin/node /Users/asee2278/git/mycode/JavaScriptLab/typeScript/concepts/sort.js
[
Student { name: 'john', marks: 100 },
Student { name: 'prem', marks: 97 },
Student { name: 'aseem', marks: 47 }
]
Does anyone know why AngularJS not selecting options on <select multiple> if ng-model is an array of integer?
$scope.selected = [1, 3]
$scope.options = [
{id: 1, title: 'option 1'},
{id: 2, title: 'option 2'},
{id: 3, title: 'option 3'}
]
Everything works just fine if $scope.selected = ['1', '3'] is array of string. I need to get it working without using ng-options.
Here is JSFiddle:
http://jsfiddle.net/maxflex/3jfk8/19/
I have created a select box in two different ways with AngularJS. One with static options in the HTML and ng-model and one with ng-options.
Both populate the select box, however, when a value comes back from the REST API the select box stays blank.
The docs suggest tracking by id.
<select id="delimiter" name="delimiter" ng-model="config.delimiter"
ng-options="option.name for option in data.availableOptions track by option.id">
</select>
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'} //This allegedly sets the default value of the select in the ui
};
//Truncated version of what happens after API call
$scope.config = $scope.result.selectedConfig;
The data that comes from the server contains the numbers i.e. the ids.
The config option is supposed to have the delimiter set on it and then the select box is supposed to select the correct item, but it doesn't.
However, a simple example like this DOES work at selecting the correct item so it must be something with the binding after the REST call.
<body ng-app ng-controller="AppCtrl">
<div>
<label>Delimiter</label>
<select ng-model="mydelimiter">
<option value="44">Comma</option>
<option value="9">Tab</option>
<option value="32">Space</option>
<option value="124">Pipe</option>
<option value="59">Semi-Colon</option>
<option value="58">Colon</option>
</select>
</div>
</body>
function AppCtrl($scope) {
$scope.mydelimiter = '59';
}
I'm not sure if this is exactly what you were looking for but if you'er just trying to set a specific default value, set the model to the selectedOption
$scope.config = {};
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'}
};
$scope.config.delimiter = $scope.data.selectedOption;
Or you could set it directly from the array:
$scope.config.delimiter = $scope.data.availableOptions[0];
Here's a fiddle with a working example:
http://jsfiddle.net/pkobjf3u/1/