I have the ngoptions array bound asynchronously inside my controller. When I create a select with it, there is an empty option being created. How do I avoid?
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess"> </select>
My controller code
Employees.query(function(employees){
$scope.employees = employees
});
How do I avoid empty select being created? I tried ng-init but it didn't work
Solution
(1) You can create blank option. This will be selected by default.
$scope.order.employee = -1
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess">
<option value="-1">--Select--<option>
</select>
(2) You can select first option
Employees.query(function(employees){
$scope.employees = employees
$scope.order.employee = employees.length ? employee[0]._id : -1
});
That's because you didn't initialized your model.
You have to set a default value for your ng-model="order.employee" in your controller.
Like:
$scope.order.employee = -1
and your select should have this structure:
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess">
<option value="-1">Click to Select<option>
</select>
Related
I have a select element in my component template that is hooked up a selectedEmp model.I want to be able to update the selectedEmp in the component and have the correct value show in the select element. My current setup is not letting this happen. Instead the select value does not display the selectedEmp. I console logged the selectedEmp, and its value is changing. I think this is because the option element is never set to any value when i do it via the component. Does anyone know a way to do this.
Component.html
<select name="sel1" class="form-control" (ngModelChange)="onChange($event.target.value)" [(ngModel)]="selectedEmp">
<option [value]="employee" *ngFor="let employee of employees">
{{employee}}
</option>
</select>
Component.ts
employees:Array<string> = ["Andrew","Allen","Kevin","Phil"];
visable:boolean = false;
selectedEmp:any = null;
constructor(){}
// Selection change
onChange(value:any):void {
console.log(value);
}
updateModel(){
this.selectedEmp = "Allen"
}
It's not quite clear from your question but I did see one error on your (ngModelChange) event binding, since the items are strings, $event.target.value fails try (ngModelChange)="onChange($event)".
But that was only for console anyway, so removing it leaves:
<button type="button" (click)="updateModel()">Select Allen</button>
<select name="sel1" [(ngModel)]="selectedEmp">
<option [value]="employee" *ngFor="let employee of employees">
{{employee}}
</option>
</select>
How can I avoid blank option in the form output?
<select class="form-control" ng-model="item.type" >
<option ng-value="0">Real</option>
<option ng-value="1">Fake</option>
<option ng-value="2">Both</option>
</select>
item.type is set in the controller
The issue slightly different from what I saw in similar topics because of usage of ng-value and the fact, that value of item.type is already set
Edit: Changing ng-value to value solved the issue.
How is item.type set in the controller?
The blank line is the current value of item.type. If you set it as an object in the controller, it's normal to be shown that way. Try setting it to one of the 3 choices you have like this:
angular.module('yourModule').controller('ctrl', function($scope)){
$scope.item = {}; //edited
$scope.item.type = "1"; // or 2, or 0
}
This is how angular handles two-way databinding. If the value of your item.type does not match any of the options, it is normal to add another blank line.
EDIT:
<select class="form-control" ng-model="item.type" >
<option value="0">Real</option>
<option value="1">Fake</option>
<option value="2">Both</option>
</select>
The problem of blank option is due to the ng-model is not matching with the ng-option values. Could you just print the value of item.type in view using {{item.type}}.
Make the following changes.
In controller set the item.type as
$scope.item = {};
$scope.item.type = "1";
make the following changes in html.
<select class="form-control" ng-model="item.type" >
<option value="0">Real</option>
<option value="1">Fake</option>
<option value="2">Both</option>
</select>
I have an html list with a form for defining filter values. In this form there is a select box:
<div style="...">
<label for="lstCategory">Category:</label><br/>
<select name="category" id="lstCategory" ng-model="category" ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
</select>
</div>
In my controller I bind the "categories" model to a REST resource:
.controller('AppointmentsHomeCtrl', [
...
function(
...
) {
$scope.location = typeof $location.search().location != 'undefined' ?
$location.search().location :
'0';
$scope.category = typeof $location.search().category != 'undefined' ?
$location.search().category :
'0';
$scope.categories = CategoriesResource.query();
Now I want to preselect a value in this select box, depending on the dearch parameter "location" in my url, which is done by the $scope.category = typeof $locati....... part of the code.
My problem is, that this preselection isn't reflected to my HTML while the mnodel itself has the correct value.
I already tryed to set the value after the query to the resource is done by watching the resource or giving a callback function to the "query" method but this also isn't working.
Did I missed something here? What is the correct way to solve this problem?
Edit:
It seems to recognise the options since:
$scope.category = "foo"; adds a pseudo option which gets selected.
But when I choose an existiong id, nothing happens at all:
$scope.category = "3";
at controller you can try this method for preselect value
$scope.precategory = '0'; //just for example value
then on your html code make sure ng-model having different variable with ng-repeat like this one
<select name="category" id="lstCategory" ng-model="precategory " ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
that method will help solve your problem, because i was getting same problem before :)
Instead of $scope.categories = CategoriesResource.query(); try:
CategoriesResource.query().then(function(result) {
$scope.categories = result;
});
You may have to tweak it a bit if the result is not an array...
My problem is that ng-selected is set as true but the option is not getting selected
This is my controller code
.controller("PendingInvoiceCtrl", function($scope, $location, safeApply, dataService) {
var userData = dataService.data();
var mauth_token = userData.mauthToken;
var mauth_acntId = userData.thisApartment.account;
var apt_id = userData.thisApartment.id;
$scope.house_list = userData.thisApartment.house;
$scope.selectedHouseId = $location.search().houseId;
console.log($scope.selectedHouseId);
});
This is my HTML code
<select ng-model="selectedHouseId">
<option ng-repeat="house in house_list" ng-selected="{{ house.house_id == selectedHouseId }}" value="{{ house.house_id }}">
{{ house.house_display_name }}
</option>
</select>
And below is my data format
{
house:[0]:{
house_display_name: "paras, 101",
house_id: "520755"
}
}
The ng- attributes don't need the extra curly braces. Try:
<option ng-repeat="house in house_list" ng-selected="house.house_id == selectedHouseId" ng-value="house.house_id">
{{house.house_display_name}}
</option>
A better approach would be to use the ng-options possibility of the select tag. This would result in:
<select
ng-model="selectedHouseId"
ng-options="house.house_id as house.house_display_name for house in house_list">
</select>
And then you don't need to manually worry about the selected attribute for the options, as it will select the one depending on the value of the model.
Your option tag should be:
<option ng-repeat="house in house_list" ng-selected="house.house_id == selectedHouseId" ng-value="house.house_id">
if you use ng-Selected and ng-Model together was never really specified. It looks like at some point ng-Model took priority over ng-Selected.
I recommend you to use the Angular Directive ng-options.
<select ng-options="house.house_id as house.house_display_name for house in house_list" ng-model="selectedHouseId"></select>
Associated plunker: http://plnkr.co/8LGz5o0d2gDRoRHYr4pQ
Let my HTML is as follows:
<div ng-repeat="option in options">
<select ng-model="myselect">
<option value="">{{option.attribute_text}}:</option>
<option value="">{{option.attr_value}}-${{option.cost}}</option>
</select>
</div>
I want to get the values of the option selected in the ng-model. Is there any methods to get the values in the ng-model under a ng-repeat?
You have multiple selects and you are giving same model to all of them.
you can't give them same myselect to all of them.
give each option(the ones you are repeating) a name, and use an object's keys for their model.
<div ng-repeat="option in options">
<select ng-model="selections[option.name]">
<option value="">{{option.attribute_text}}:</option>
<option value="">{{option.attr_value}}-${{option.cost}}</option>
</select>
</div>
then you can access them like $scope.selections["some option name you gave earlier"]
if you want to use select you can use ng-select
if you specify ng-model for ng-select it bind the select option to ng-model
you can see it in this jsbin
Have a look at: https://docs.angularjs.org/api/ng/directive/select
Here's an example that should be about right:
Options stored as list of hashes in your controller:
$scope.options = [ { "attribute_text" : "whatever", "data" : { "value" : 9, "cost" : 8 }, { ... } ]
// Selected value
$scope.optionSelected = {};
HTML:
<div>
<select ng-select="option.attribute_text for option in options" ng-model="optionSelected">
</div>