I use as-sytax(like ng-options="p.id as p.name for p in options") for select options.
The problem is, I need access to p too. For example, to display additional label near input or button or even change inputs.
So, I can't do it, since I need to set just id. It could be a solution to use another variable and set id using $watch. But I have selected id and it will be a mess to sync all this things...
Is there solutions for similar problems?
Plnkr: http://plnkr.co/edit/7LStlQnkVGBjwsI3d9NO?p=preview
this is what you need
model will be the ID:
<div ng-init="init();">
<select ng-model="model" ng-options="o.id as o.label for o in options"></select>
<span>Your data is: {{model}}</span>
</div>
model will be complex data object:
<div ng-init="init();">
<select ng-model="model" ng-options="o as o.label for o in options"></select>
<span>Your data is: {{model.data}}</span>
</div>
Related
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'm creating a form that has some select and some input types, as shown below.
<div id="datiRichiesta">
<div *ngFor="let d of formDatiRichiesta" class="form-row">
<input *ngIf="d.type=='text'"
type="text"
class="form-control"
placeholder="{{d.placeholder}}"
[(ngModel)]="model[d.name]"
name="{{d.name}}"
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"
value="richiesta.prova"/>
<select *ngIf="d.type=='select'"
class="form-control"
name="{{d.name}}"
[(ngModel)]="model[d.name]"
required>
<option selected disabled value="">{{d.placeholder}}</option>
<option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.nome}}</option>
</select>
</div>
</div>
I've got two main issues:
I need to set a value on the input type, but it is not working. I know that I should use something like ngValue, or at least so I've read online, but most examples are referred to angularjs and I got a bit confused. If I simply put [ngValue]="richiesta.prova" the browser complains that Can't bind to 'ngValue' since it isn't a known property of 'input'.
I need to show a placeholder for the select, but it's not working since the first <option> is part of the dropdown list as all the others. On this I don't have a clue, because it should really work as it is.
Any help will be appreciated, maybe with some explanation, I sense I'm missing something about angular binding.
Thanks.
1) NgModel sets the value. If model[d.name] is not empty - it will be set.
https://angular.io/guide/forms
2) How to show placeholder (empty option) in select control in Angular 2?
These 2 lines are redundant:
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"
If your placeholder is not working then it simply means that you have assigned them some value to that input. In your case, I am 100% sure that {{ d.placeholder }} holds some value( might be value equal to ' '). Assign this value to NULL. Then see the result.
placeholder="{{d.placeholder}}"
I have created a service, written a code grabbing the names of the users in the AngularJS controller and am calling it in the view but i dont see anything :/ am i doing something incorrectly? new to angularJS btw.
this is the revised angular controller
Official way of generating options in AngularJS:
<select ng-model="mySelection" ng-options="user.value as user.userName for user in allUsers">
<option value=""></option>
</select>
Also, you are setting ng-model to be the same as the thing being looped, hence you're seeing nothing.
ng-model will be the variable which will save your selection from allUsers.
You need to use ng-options directive to generate <option> elements. ng-model directive is used to specify model property to store selected option.
Example from official documentation:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions
I've made a simple angular.js example which shows my problem: example
I want to set the start value of the select element to a specific value.
<select name="i" id="i" ng-model="selectedItem">
<option ng-repeat="i in items" value="{{i}}">{{i}}</option>
</select>
The options and the select element get rendered perfectly. But, like in the example, when i set the value in my controller to 6, the selected value on the page is still the first element.
scope.selectedItem = 6;
There are 2 simple buttons which just change the selected value. When you press them the selection change without problems.
EDIT: i updated the jsfiddle and removed unused code and renamed code to make things a bit more clear
EDIT2: I missed to ask if it is possible to fix the second select element too? The different is that this array contains objects instead of numbers.
<select name="o" id="o" ng-model="selectedItem">
<option ng-repeat="o in objects" ng-value="{{o.ID}}">{{o.Text}}</option>
</select>
You should not use ngRepeat to render option elements, it's not supposed to work properly with select and options. Use ngOptions which will work as expected with ngModel:
<select name="i" id="i"
ng-model="selectedItem"
ng-options="i for i in items">
</select>
For the second selectbox which has ngModel bound to ID property of the objects in array, it will be:
<select name="o" id="o"
ng-model="selectedItem"
ng-options="obj.ID as obj.Text for obj in objects">
</select>
Demo: http://jsfiddle.net/d3jf7ueq/9/
I'm currently having a problem with selecting drop downs which are not working correctly with angularjs. Couldn't find anything that relates to my problem. It seems odd.
I am a newbie to angularjs so please forgive my ignorance
I am currently trying to retrofit angularjs onto my MVC5 application.
Here are the issues;
When $scope.selected = $scope.options[0] is declared it is assigned, but as if the select list does not recognize the model's object and creates a new option
Once you change the selected option on the drop-down, selected the object in scope is now empty?
Here is the code
The comprehension expression is incorrect. It looks like you want the whole option as the selected value so use this:
ng-options="o.text for o in options"
You should change your
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
to
<select ng-model="selected" ng-options="o as o.text for o in options"></select>
to make it work as you expected.
because the documentation says select as label for (key , value) in object but in your case select is equal to code property of the object, not the object itself.
<div>
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
<br />Code: {{ selected.code }}
<br />Text: {{ selected.text }}
</div>
Your ng-model will contain the value of the select (in this case the index [0,1,2,etc]). So you are attempting something like this "1.code" or "2.text".