How to set ng model value to form fields? ng model value not reflecting on my form
I have a $scope.obj, this obj from server when i try to apply in my form like
ng-model="obj.name", its not reflecting in <select> field. How to solve this issue?
<select class="form-control" ng-model="empEdit.qualification"
ng-options="qualification as qualification.qualificationName
for qualification in qualifications"
name="qualification">
<option value="" selected disabled hidden>
Choose your qualification
</option>
</select>
Controller:
$scope.empEdit = {
"name":"SomeName",
"id": 2,
qualification: {"id":1,"qualification_name: "BS"}
};
The ng-model directive compares object references not object contents. Use a primitive property for the ng-model value:
<select class="form-control" ng-model="empEdit.qualById"
ng-options="q.id as q.qualificationName for q in qualifications"
name="selQual1">
<option value="" disabled>
Choose your qualification
</option>
</select>
$scope.empEdit = {"name":"SomeName", "id": 2, qualById: 1};
For more information, see
why does Javascript comparison not work with objects?
AngularJS ng-options Directive API Reference - select as
Related
I am binding state object from states list but I want to initialize that field with object.name, how can I do it in angular js
Add more details to get the correct answer...although heres some info which you might be looking
--> you can initialise any model with ng-init directive eg. ng-init="object.namekey"
--> for drop down list
<select ng-model="statesObject" ng-options="y.name for (x, y) in states">
</select>
--> and by the way you can get any object's name in javascript with myObj.constructor.name
Updated answer according to your comment
<select ng-model="States[0]" ng-options="state as state.stateName for state in States" name="State" required>
<option value="">Select State</option> </select>
$scope.States = [{stateName:'State1'},{stateName:'State1'},{stateName:'State3'},{stateName:'State4'}];
ng-model will do the trick....you just have to give the reference of the object from States array which you are using in ng-select
Plunker : http://plnkr.co/edit/rlArYYM8ygDB2IM8kG6M?p=preview
I have a form using a select. I'm trying to set a default value, which I want to disable, so the dropdown will show "-- select state --" as the first option and will force the user to make a selection.
My problem is it's not working and the select always starts out blank.
Here is my code:
<select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
<option ng-disabled="$index === 1" ng-selected="true">--Select State--</option>
<option value="{{state.abbreviation}}" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
</select>
Check this one with default <option> and ng-options:
<select ng-model="contactEditCtrl.addressData.state"
ng-options="state.name as state.name for state in contactEditCtrl.states" >
<option value="" ng-disabled="true">-- select state --</option>
</select>
Demo fiddle
It will be converted to:
<select ng-model="addressData.state" style="width: 50%;"
ng-options="state.name as state.name for state in states" class="ng-valid ng-dirty">
<option value="" ng-disabled="true" class="" disabled="disabled">-- select state --</option>
<option value="0">CCCCC</option>
<option value="1">QQQQQQ</option>
</select>
The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.
In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.
Taken from here
So I'd suggest writing it like this.
var app = angular.module('myApp', []);
// Register MyController object to this app
app.controller('MyController', function MyController($scope) {
this.addressData = {state: "--Select State--"};
this.states = [{abbreviation: 'a', name:'ant'}, {abbreviation: 'b', name:'asd'}, {abbreviation: 'b', name:'asd2'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app='myApp' ng-controller='MyController as contactEditCtrl'>
<select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
<option value="--Select State--">--Select State--</option>
<option ng-value="state.abbreviation" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
</select>
</div>
I want to select the "id" that I have stored and display it in the form, I need to edit the form and I need to start the form, is selected the id that stores when saving with their respective names.
<select class="form-control"
ng-model="vm.operative_order_id"
ng-selected="dataOrder.operative_order_id" <!--The "id" or "operative_order_id" is from a related table -->
ng-options="orderoperatives.id as orderoperatives.nombre for orderoperatives in dataOperatives"></select>
The "dataOrder.operative_order_id" and "orderoperatives.id" have the same value, what I want is to show the name of that value.
if dataOrder.operative_order_id = 2 I need it "selected" in the ng-option
<option value="2" selected>name</option>
<select class="form-control"
ng-model="vm.operative_order_id" >
<option ng-repeat = "item in orderoperatives " value = "{{item .id}}">{{item .nombre}}}</option>
</select>
Can you pls try like this :)
You don't need ng-selected
Just try this
<select class="form-control" ng-model="dataOrder.operative_order_id"
ng-options="orderoperatives.id as orderoperatives.nombre for
orderoperatives in dataOperatives"></select>
or try this
<select class="form-control"
ng-model="vm.operative_order_id"
ng-selected="dataOrder.operative_order_id" ng-options="orderoperatives.id as orderoperatives.nombre for orderoperatives in dataOperatives"></select>
and you should assign thedataOrder.operative_order_id to vm.operative_order_id in controller, something like
$scope.operative_order_id=$scope.dataOrder.operative_order_id;
I have a drop down which contains the following values
<select class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
Because of this in drop-down the value is always selected to "Critical"
In my scope i have defined the values of severity per drop-down. How do i select that ?
For example say the value is "High". How do i set the default value to high and not critical
You'll need to define at object within your scope and bind it to the ng-model of your select.
Script
$scope.form = {
"severity": "high"
};
HTML
<select class="form-control" ng-model="form.severity">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
There are a couple of ways to select an option with angular:
1- Bind it to a model and set the model:
<select class="form-control" ng-model="myValue">
And
$scope.myValue = 'medium';
2- You can set it in a directive by jQuery or JS:
$("#yourselectid").val('low');
I have an angular controller as written below;
controllers.controller('editCodeReviewCtrl', ($scope, $rootScope, $modalInstance, User, reviewRequestId, reviewRequestDetail, reviewRequestValue, reviewRequestTitle) ->
console.log "reviewRequestvalue", reviewRequestValue
$scope.reviewRequest = {}
$scope.reviewRequest.id = reviewRequestId
$scope.reviewRequest.detail = reviewRequestDetail
$scope.reviewRequest.value = '25.0'
$scope.reviewRequest.title = reviewRequestTitle
$scope.values = [
{value: '10.0'},
{value: '25.0'},
{value: '50.0'} ]
)
And my view template looks like the below;
<select ng-model="reviewRequest.value" ng-options="ele.value for ele in values" name="value" required class="friendly-margin pull-right">
</select>
I would expect that my drop down would have default value set, in the example case here it should be set to '25.0' but I'm not observing that behavior in the browser.
notice the html that is being output
<select ng-model="reviewRequest.value" ng-options="ele.value for ele in values" name="value" required="" class="friendly-margin pull-right ng-pristine ng-valid ng-valid-required ng-touched">
<option value="?" selected="selected" label=""></option>
<option value="0" label="10.0">10.0</option>
<option value="1" label="25.0">25.0</option>
<option value="2" label="50.0">50.0</option>
</select>
What direction to take this debugging?
i've looked at this post as well, how to use ng-option to set default value of select element which appears consistent with how I've written my own code.
As the documentation explains, when you use an expression such as
label for value in array
what is displayed in the select box is label, and what is bound to the ngModel is value. So, in your expression:
ng-model="reviewRequest.value" ng-options="ele.value for ele in values"
ele is one of the objects in the array of values. And if you want the object {value: '25.0'} to be the one selected in the select box, your ngModel should be a reference to this object (not an equal copy!):
So your controller should set reviewRequest.value to $scope.values[1].
Or, if you want the ngModel to contain the string 25.0and not the object containing this value, the expression should be
ng-options="ele.value as ele.value for ele in values"
In controller $scope.reviewRequest.value = $scope.values[1];