Here is my runable Plunker
I want to sort items by name. This is the bug, for the top one, "Please select a student name", it displays as an empty field.
<select ng-options="student as student.name for student in students | orderBy: sortNameExcludeTopOne"
ng-model = "student">
</select>
$scope.sortNameExcludeTopOne = function(student) {
if (student.id === 0) {
return -1;
}
return student.name;
}
What I want:
Now I sort items by its name by using a custom function in the controller, can we do sort items by its name in the template? instead of in controller?
What UI I want for select is:
"Please select a student name" -> "Bar" -> "Foo"
Update: I want the "Please select a student name" at the top of select
You don't need push the item to array, you can put then direct in the view:
<select ng-options="student as student.name for student in students | orderBy: 'name'" ng-model = "student">
<option value="">Please select a student name</option>
</select>
You want the options available to them sorted by the name:
<select ng-options="student as student.name for student in students | orderBy: 'name'" ng-model="student">
</select>
That should sort the students by their 'name' property.
Edit:
If you want to add the extra option at the top, then, use your controller to sort the 'students' first:
students() {
const studentList = someStudents();
studentList.sort((a, b) => {
if(a.name < b.name) return -1;
if(a.name > b.name) return 1;
return 0;
});
studentList.unshift({ new: option, goes: here });
}
Then you can sort it there, and insert one more option at the beginning with the option you want visible.
Incidentally you could use orderBy: 'name' still, assuming your options are based on 'value'; you'd have to have one more default entry with a numeric value like so:
<select ng-options="student as student.name for student in students | orderBy: 'name'"
ng-model="student">
<option value="-1">Please select a student name:</option>
</select>
Related
When I try to display my value the select box is always empty. The value is a integer 0 1 2 3 . In this case it should show 0, but the box is empty. What am I doing wrong?
vmDialog.dataModel.requestType value is equal to a 0 integer, but not displaying.
<select class="form-control " name="requestType" ng-model="vmDialog.dataModel.requestType">
<option value=0>0</option>
<option value="{{0}}">0</option>
<option value="0">0</option>
</select>
Firstly there is a simple HTML issue, you need to ensure that each option has a unique value, so far you have used the value 0 for all the options, so when the requestType has a value of 0, the UI cannot pick which of the items should be selected.
If the value supposed to be one of 0,1,2,3 then you need to make sure that there is an option with a corresponding value that can be selected.
What you probably want to do is bind the options to an array that is in the view model:
// on vmDialog
var requestTypeOptions = [
{ name = 'Zero', value = 0 },
{ name = 'One', value = 1 },
{ name = 'Two', value = 2 },
{ name = 'Three', value = 3 },
];
Then in the view: (using ng-options)
<select class="form-control"
name="requestType"
ng-model="vmDialog.dataModel.requestType"
ng-options="o.value as o.name for o in vmDialog.requestTypeOptions track by o.value | orderby: 'value'"
class="form-control input-sm">
</select>
A good write-up for ng-options here: https://stackoverflow.com/a/30507651/1690217
You could also use ng-repeat if you need to customise the template:
<select class="form-control " name="requestType" ng-model="vmDialog.dataModel.requestType">
<md-option ng-value="o.value" ng-repeat="oin vmDialog.requestTypeOptions | orderBy: 'value'">{{o.name}}</md-option>
</select>
I have two selects
The first one is for regions
and the second one for cities
The first one is filled with regions
Now i have a methode that brings cities by the id of the region .
I dont know how to get the idregion and put it into the params function
This is my first select
<div class="form-group">
<label for="">Region</label>
<select class="form-control"
[(ngModel)]="region" name="Region">
<option></option>
<option *ngFor="let region of
objectKeys(dropDownList2)|keys"
[value]="dropDownList2[region].idRegion">
{{dropDownList2[region].nomRegion}}
</option>
</select>
</div>
My services :
getville() {
return this.http.get(this.urltest + 'Villes');
}
getRegion() {
return this.http.get(this.urltest + 'Regions');
}
GetRegionVille(idRegion) {
return this.http.get(this.urltest + 'Villes/GetRegionVille/' + idRegion);
}
My component.ts :
getidregion() {
this.res.getRegion().subscribe(R => {
this.dropDownList2 = R as any;
});
}
getregionville() {
this.res.GetRegionVille(****i don t know how to get the idregion**** )
.subscribe(response => {
this.dropDownList = response as any;
});
}
this is my function
// GET: api/Villes
[HttpGet("GetRegionVille/{id}")]
public async Task<IActionResult> GetRegionVille([FromRoute] int id)
{
var req = from v in _context.Villes
join r in _context.Regions
on v.IdRegion equals r.IdRegion
where r.IdRegion == id
select new {v.NomVille };
return Ok(req);
}
My select of the cities :
<div class="form-group">
<label for="">Ville</label>
<select class="form-control" name="Ville"
[(ngModel)]="ville">
<option></option>
<option *ngFor="let ville of objectKeys(dropDownList) |
keys"
[value]="dropDownList[ville].idVille">
{{dropDownList[ville].nomVille}}
</option>
</select>
The selected value will be in region variable as you state [(ngModel)]="region" and you can use (ngModelChange)="onChange($event)" to get an event when value changes
I am not sure if using two way data binding with (ngModelChange) is efficient, so please see this answer How can I get new selection in "select" in Angular 2?
I have a course category and course list select inputs. According to selected courses, I want to filter the ng-options so that user won't select same courses twice
<td>
<select ng-show="course._courseId" class="form-control"
ng-model="course.lookup_course_id"
ng-options="s.id as s.name for s in subcourses[course._courseId] | filter:notSelectedCourse">
<option value="">Select Course</option>
</select>
</td>
And I'm using the following function to filter selected courses
$scope.notSelectedCourse = function(scourse) {
if (!$scope.course_list)
return true;
for (var d, i = 0; i < $scope.course_list.length; i++) {
d = $scope.course_list[i];
if (d.lookup_course_id == scourse.id)
return false;
}
return true;
};
However, angular.js doesn't update second selectbox value and update the model.
When I disable filter, it works fine but I need to add the filter so that user cannot select same course twice.
Here is the DEMO, try to use select input
Any help would be appreciated
Hope this is what you are expecting .....
Also did put the same constraint to the category selection
demo http://embed.plnkr.co/tkr4nWedY45eGn48aFtP/
// This filter/predicate will invoked when select renders the options for each item in categories ...
// If all course of the categerory has been selected
// then the options can be displayed. Else the option can be displayed to selected ....
$scope._filters.selectableCategories = function(selectedCategoryId) {
return function(item) {
// 1. get the selected courses whose :
// 1.1 course id is set/ NOT NULL... hence we ignore the courses that the user has not yet selected the course ...
// 1.2 categerory == item
// 1.3 categerory is not the current select category ... bcos the current selected category IS ALWAYS SELECTABLE ...
//2. If the above count NOT EQUAL the course in category, then is selectable ...
return $scope._courseList
.filter(function(elm) { return elm._courseId && elm._categoryId !== selectedCategoryId && elm._categoryId === item.id;})
.length != $scope._courses[item.id].length;
}
}
// This filter/predicate will invoked when select renders the options for each item in courses_of_category ...
// If the option has is not in the selected courses
// then the options can be displayed. Else the option can be displayed to selected ....
$scope._filters.selectableCourses = function(selectedCategoryId, selectedCourseId) {
return function(item) {
// 1. get all the select courses :
// 1.1 category === selected categerory
// 1.2 course is not the selected course ... again bcos the current selected course IS ALWAYS SELECTABLE ...
// 2. get the array of courseIds ...
// 3. If item's id IS NOT IN the array, then item IS SELECTABLE ...
return $scope._courseList
.filter(function(elm) {return elm._categoryId == selectedCategoryId && elm._courseId !== selectedCourseId;})
.map(function(elm){ return elm._courseId; })
.indexOf(item.id) < 0;
}
}
I'm using angular to create a search property form, and I've got a select box with amount of bedrooms, how can I create a greater then filter? (for example: when 2 bedrooms selected, display all properties with 2 bedrooms or more)
The select box:
<select class="form-control"
name="bedrooms"
ng-model="Bedrooms"
ng-options="property.data.SubType as (property.data.Bedrooms + ' Bedrooms ('+ property.count +')') for property in properties | unique:'Bedrooms' | orderBy:'data.Bedrooms'">
<option value="">Minimum Bedrooms</option>
</select>
And the filter:
<tr ng-repeat="property in filtered = (properties | filterMultiple:{Address: Address, SubArea:SubArea, SubType:SubType} | filter:{Bedrooms:Bedrooms})| orderBy:Address">
This is my JSFiddle
http://jsfiddle.net/odpw6c6q/43/
In ng-options use ng-options="property.data.Bedrooms as instead of ng-options="property.data.SubType as
because data.Bedrooms is the property that contains number of bedrooms which should be stored in ng-model
In scope add this function
//Filter Function
$scope.greaterThan = function(bedrooms) {
return function(item) {
if ( item['Bedrooms'] > bedrooms) {
return true;
} else {
return false;
}
}
};
In ng-repeat use filter: greaterThan(Bedrooms) instead of filter:{Bedrooms:Bedrooms}
Tried the solution given in Showing unique dropdown options in Angularjs
<select ng-model="categorySelected" ng-options="c.category for c in accounts|unique:'category'">
</select>
<div ng-repeat="c in accounts| filter:categorySelected">
.........
</div>
app.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
I also tried
<div ng-repeat="c in accounts| filter:{templateCategory: categorySelected}">
I have rows fetched from the table and is getting displayed on the html. I want to list unique categories from the result in dropdown. But on selection, i want all the rows belonging to that category to be listed. Now i get the unique categories in the dropdown but even the ng-repeat results show only the unique results which should not be the case. Please help.
I suspect the problem is in the use of filter in ngRepeat.
1) Use as to set categorySelected to the value of the category selected in the dropdown...
<select ng-model="categorySelected"
ng-options="a.category as a.category for a in accounts | unique:'category'">
</select>
2) User filter: { category: categorySelected } in ngRepeat to filter accounts by category based on the current value of categorySelected...
<div ng-repeat="a in accounts | filter : {category: categorySelected}">
{{ a.name }}
</div>
JSFiddle