In Angularjs, binding input select to the model creates new empty option
<option value="? undefined:undefined ?"></option>
And this is the code
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Is this normal? It doesn't seem to be something good looking.
Make sure you have initialized your model variable with one of the option value.
Try this
Controller
$scope.hotspot = {};
$scope.hotspot.category = "Culture";
HTML
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Related
I have two selects one for classes and another for teachers as follows,
<label for="">Select Class</label><br>
<select ng-model="currentClass" ng-options="class as class.name for class in classes" ng-change="listTeachers()">
<option value="">Select Class</option>
</select>
<label for="">Select Teacher</label><br>
<select ng-model="currentTeacher" ng-options="teacher as teacher.name for teacher in teachers" ng-change="showStudents()">
<option value="">Select Teacher</option>
</select>
My problem is, if choose class and then choose teacher it's fine, but after choosing teacher if again I choose another class then I want to set 2nd select a value as "select teacher", how to do it?
Also tell me, is there any way of setting default value instead of setting it through option tag?
in your controller on the listTeachers() function you need
to set the model on the value you desire, example:
vm.listTeachers = function() {
vm.currentTeacher = '';
... // rest of your code
}
so when ever you change your class it invokes listTeacher, and i will reset the value, hope this helps.
Below is my code
<select class="form-control" id="prevCountry" name="prevCountry" ng-model="asset.assets.countryID" ng-options="value.ID as value.country for value in technical.country">
<option value="">Select Country</option>
</select>
angularjs code
$scope.technical.assets.push($scope.assets);
I'm posting countryID but I want to push into ng-repeat object the countryName of countryID.
If I understood you right, you need to check the example of ngOptions usage here. Created a Plunker for you. Hope it'll help.
<select name="mySelect" id="mySelect"
ng-options="option.countryName for option in technical.country"
ng-model="asset.assets"></select>
In Angular2, is there a clean way to handle a form control's value as something else than a string, for example have a <select> with options (bool) true and (bool) false?
Currently I'm using solutions that don't feel very elegant:
<select (change)="model.published = !!$event.target.value">
<option value="">No</option>
<option value="1">Yes</option>
</select>
<select (change)="model.type = $event.target.value * 1">
<option value="1">My value is (int) 1</option>
<option value="2">My value is (int) 2</option>
</select>
I'm using <select>s in my example, but I'm interested in other form controls as well.
This question was suggested as a duplicate, but I'm don't think it is one since I'm not
interested only in selects
trying to generate options dynamically
This is a known limitation in the current Angular version https://github.com/angular/angular/issues/2551
Yea just add [(ngModel)]="model.published" to the select and it'll set the value property of the <option> selected, if you add an object in the <option> like this: <option value="{{object}}"> you'll set an object, it doesn't have to be a string.
I'm new to AngularJS, so I apologize if this question is naive.
We have cascading selects that populate as you select values. When the value of Select A changes, the values in Select B also change since they filter based on the value in Select A.
So here is the scenario:
Choose option from Select A
Choose option from Select B
Change selection for Select A
Observe that options in Select B update accordingly.
Observe that bound model for Select B does not update accordingly.
This seems so basic that we are really scratching our heads. What is the point of two-way data binding if this scenario isn't covered?
Here is my view:
<body ng-controller="MainCtrl">
Make:
<select ng-model="makeng" ng-options="option.value as option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
<br />
{{makeng}}
<br /> <br />
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
{{modelng}}
</body>
Here's a Plunkr, demonstrating:
http://plnkr.co/edit/9XrKgW?p=preview
P.S. The above example is purely fictional and forked from another plunkr. Just the easiest way to demonstrate what we are seeing.
This is how it is supposed to work. The select control changes the model in response to a user's selection, but if you change the set of allowed values from underneath it (i.e. by filtering out) it keeps the model intact.
The way to make this work is by invalidating the model in response to a change in Select A:
Make:
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes"
ng-change="modelng = undefined">
<option value="">Select a make</option>
</select>
<br />
Model:
<select ng-model="modelng"
ng-options="option.display for option in models | filter:{make:makeng}">
<option value="">Select a model</option>
</select>
I have a select element with six options, the first being a blank option:
<select name="method-rcvd" class="form-control" ng-model="workRequest.ReceiveMethod" required >
<option value="" ng-selected="true"></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
On the scope is the object property bound to this select:
$scope.workRequest.ReceiveMethod = "";
For some reason, the select ALWAYS defaults to "Phone", instead of blank. I want it to default to blank. When I remove the model binding it works, so I know it has something to do with that, but it needs to be bound. This seems to me that it should be relatively straightforward, but I am having a very difficult time getting this simple thing working.
When I spit out the value of ReceiveMethod below the select:
Receive Method: {{workRequest.ReceiveMethod}}
It always defaults to "1". How can I get this to default to the first option, the blank option?
Thanks.
Are you setting a default value in the controller?
What happens if you set default value to 0 instead of ''?
That should work but something must be setting another value on workRequest.ReceiveMethod
I got this working by using the ng-init directive, like so:
<select name="method-rcvd" class="form-control"
ng-model="workRequest.ReceiveMethod"
ng-init="workRequest.ReceiveMethod = ''" required >
<option value=""></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
You also don't need the
ng-selected="true"
in the first (blank) option.