I have a select control in my Angular app. The values are * (asterisk), 1, 2, ... 10.
My template looks like:
<select multiple [ngModel]="search?.filter.value" (ngModelChange)="valueChanged($event)" >
<option *ngFor="let item of searchValues">{{item}}</option>
</select>
... and in my valueChanged function I get a value when the user selects the * but undefined when they select a number. If I "force" the numbers to be string (i.e. change "1" to "1st") it works, but that's not what the client wants.
I've seen some posts suggesting this might be a bug in Angular, but I want to confirm that I'm not missing something before I go back to the client with some options.
Thanks,
James
use [ngValue]
<select multiple [ngModel]="search?.filter.value" (ngModelChange)="valueChanged($event)" >
<option [ngValue]="item" *ngFor="let item of searchValues">{{item}}</option>
</select>
WORKING DEMO
Related
I'm having trouble with this code which is Angular 2. I have something like this:
<select [(ngModel)]="postoSelecionado" name="postos-disponiveis" id="postos-disponiveis" class="sel-posto" materialize="material_select" [disabled]="!checkboxPostos.checked">
<option *ngFor="let posto of getPostosAtivos" [value]="posto?.cdPt">{{ posto?.cdPt}}—{{ posto?.dsPt }}</option>
</select>
And I want to search through this select. I'm really struggling with this. Can we do something like a search like in the example below?
<option *ngFor="let posto of getPostosAtivos | search:postoSelecionado" [value]="posto?.cdPt">{{ posto?.cdPt}}—{{ posto?.dsPt }}</option>
You can use suitable npm packages matching with your requirement like ng-select: https://www.npmjs.com/package/#ng-select/ng-select for your Requirement
Or you can create your own select option.
Please check this also
How to add a search filter to a select option in angular
I got some problems with selectbox.
In my original code, I receive an object through $http calling, and that is like below.
[
{key:'user_id', value:'ID'},
{key:'user_name', value:'Name'},
{key:'user_gender', value:'Gender'},
{key:'user_phone', value:'Phone'},
{key:'user_email', value:'Email'},
{key:'user_birth', value:'Birthday'},
];
When I tried to put values of this object into option, it made 'blank option' automatically.
To solve this, I saw two posts
Angular JS Remove Blank option from Select Option
Why does AngularJS include an empty option in select?
but any solutions of these could not help me.
How can I fix this?
Here's my fiddle.
Select box create blank option
I'll wait some handsome or pretty developers who will solve my problem. :)
Try This
HTML Code -
<select ng-options="opt as opt.value for opt in searchOpt.option" ng-model="searchOpt.selected">
</select>
The ngOptions attribute can be used to dynamically generate a list of elements for the element using the array or object obtained by evaluating the ngOptions comprehension expression
Working Jsfiddle
<select ng-model="itemSelected">
<option
ng-repeat="item in data" value="{{ item.key }}"
ng-selected="{{item.key === itemSelected}}">
{{ item.value }}
</option>
</select>
https://plnkr.co/edit/QthDhkvku8UvcVHaWcGG?p=preview
Check the code. Use ng-selected in your option for selected first element.
I have the following dropdown. I want to set All Patients as the default value.
<select [(ngModel)]="searchModel.careprovider">
<option [value]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [value]="user._id.$oid">
{{user.dn}}
</option>
</select>
My model is declared this way:
searchModel: any = { location: null, practice: null, name: '', careProvider: 0 };
I set the practiceUsers this way:
this._practice.getUsers(this.searchModel.practice).subscribe(result => {
this.practiceUsers = result;
this.searchModel.careProvider = 0;
});
No matter how I change it I always just get a blank option as the default. I've tried adding an object to the this.practiceUsers array after it is loaded, then setting the model value. I've tried setting the model value with and without quotes to see if a number or string made a difference. Everything I try still results in the default being the blank option.
In Angular 1 I would have used ng-options, but that is no longer available for Angular 2, and every example I find shows to use the ngFor for dropdowns.
Object attributes are case sensitive, in your object, attribute is called careProvider, but in your template, you are using searchModel.careprovider with lowercase p. I think you also have to use NgValue directive instead of value because you are using NgModel directive. So, this should work: it is not working
<select [(ngModel)]="searchModel.careProvider">
<option [ngValue]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
{{user.dn}}
</option>
</select>
Try to use [selected] attribute. I solved similar problem this way:
<select>
<option *ngFor="let option of options" value="{{option.id}}" [selected]="option === selectedOption">
{{option.name}}
</option>
</select>
I hope this helps a little
<select class="form-control" id="policeid_country_id" name="policeid_country_id" formControlName="policeid_country_id">
<option [ngValue]="null">Select</option>
<option [ngValue]="country.id" *ngFor="let country of countries">{{country.country}}</option>
</select>
I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"
I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"
I have two Web API's that I am calling. Each value in the first api Type has an ID that needs to be used to filter the second api which is Category. The JSON is below:
// Types
[{"ID":1,"Text":"Hardware","Description":"Hardware"},
{"ID":2,"Text":"Software,"Description":"Software"}"}];
// Categories
[{"ID":1,"TypeID":1,"ParentID":0,"Name":"Printing"},
{"ID":2,"TypeID":1,"ParentID":1,"Name":"Toner"}]
First of all, you have to store selectedTypeID that will be used to filter another array, and than you can call Angular $filter in your second array.
Sintax:
$filter('filter')(array, expression, comparator)
e.g:
$filter('filter')($scope.categories, {TypeID: $scope.selectedTypeID}, comparator)
I think you're asking this: *How can I dynamically populate a select input based on the selection in another select input?
I think you can go two ways. If there is not much total data (like with Categories), you could use a filter on the second set of data. https://docs.angularjs.org/api/ng/filter/filter#!
You can do this in the HTML or in the controller!
<!-- HTML Page -->
<select>
<option ng-repeat="value in values | filter..." value=value>
</select>
// controller.js
values = ($filter('filter')(result.Values, {Id: $routeParams.Id}));
If there is lots of data to filter, consider delaying your call to the Category API until a Type is selected.
Without seeing the controller/HTML and whatnot, it's hard to give a specific answer, but I think this will get you moving in the right direction.
$scope.countries = CustomerService.getCountry();
$scope.getCountryStates = function(){
$scope.sates = CustomerService.getCountryState($scope.customer.Country);
$scope.cities =[];
};
<select ng-model="customer.State"
ng-options="x.Id as x.state for x in sates"
ng-change = "getStateCities()"
class="form-control"
ng-required="true"
id="state">
<option value="">-- Choose State --</option>
</select>
<select ng-model="customer.City"
ng-options="x.Id as x.city for x in cities"
class="form-control"
ng-required="true"
id="city">
<option value="">-- Choose City --</option>
</select>
Check complete code with demo