How can I set default value for option angular - javascript

I have select like this
<select ng-model="form.data">
<option value="c" ng-repeat="c in data">{{c}}</option>
</select>
$scope.data= response.data
When I change select and click save . It save successful in database . I want when refresh page . select show value I save in database. How can I do this . Please help me

The best way would be using the ng-options directive:
<select ng-model="form.data" ng-options="c for c in data"></select>
This way, when refreshing your page the select will be default set to the value of $scope.form.data, as expected.

Some advice :
Use ng-options directive instead of traditional option element.
To display the previous selected value on page refresh use HTML5 localStorage or sessionStorage.
Working Demo

Use ng-selected
<select ng-model="form.data">
<option value="c" ng-repeat="c in data" ng-selected="c == form.data">{{c}}</option>
</select>

For people who are searching for a answer in Angular | angular 2 | angular 4
try using NgValue and make sure your default options value is the model so NgValue="ModelName"
<select ng-model="form.data">
<option NgValue="form.data">yourdefaultoption</option>
<option NgValue="c" ng-repeat="c in data">{{c}}</option>
</select>

Related

ng-options not pulling from javascript array [duplicate]

I'm a little bit confused with Angular and ng-options.
I have a simple array and I want to init a select with it. But, I want that options value = label.
script.js
$scope.options = ['var1', 'var2', 'var3'];
html
<select ng-model="myselect" ng-options="o for o in options"></select>
What I get:
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
What I want:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
So I tried:
<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>
<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>
(But it didn’t work.)
Edit:
My form is submitted externally, which is why I need 'var1' as the value instead of 0.
You actually had it correct in your third attempt.
<select ng-model="myselect" ng-options="o as o for o in options"></select>
See a working example here:
http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview
The trick is that AngularJS writes the keys as numbers from 0 to n anyway, and translates back when updating the model.
As a result, the HTML will look incorrect but the model will still be set properly when choosing a value. (i.e. AngularJS will translate '0' back to 'var1')
The solution by Epokk also works, however if you're loading data asynchronously you might find it doesn't always update correctly. Using ngOptions will correctly refresh when the scope changes.
You can use ng-repeat with option like this:
<form>
<select ng-model="yourSelect"
ng-options="option as option for option in ['var1', 'var2', 'var3']"
ng-init="yourSelect='var1'"></select>
<input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>
When you submit your form you can get value of input hidden.
DEMO
ng-selected
ng-repeat
If you setup your select like the following:
<select ng-model="myselect" ng-options="b for b in options track by b"></select>
you will get:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
working fiddle: http://jsfiddle.net/x8kCZ/15/
you could use something like
<select ng-model="myselect">
<option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
{{o}}
</option>
</select>
using ng-selected you preselect the option in case myselect was prefilled.
I prefer this method over ng-options anyway, as ng-options only works with arrays. ng-repeat also works with json-like objects.
<select ng-model="option" ng-options="o for o in options">
$scope.option will be equal to 'var1' after change, even you see value="0" in generated html
plunker

Angularjs ng-value for boolean in select not working

I would like to use ng-value="true" and false (boolean) for a select option. But I want to fill the options in php because I am using laravel and the translator. This is my code, and the value is not boolean after I send the form.
<select
id="job-payed"
required
class="form-control"
name="payed"
ng-model="payed">
<option selected disabled value>Please choose..</option>
<option ng-value="true">Payed</option>
<option ng-value="false">Not payed</option>
</select>
if someone still gets that problem, try this :
<select id="job-payed" required class="form-control" name="payed" ng-model="payed">
<option selected disabled value>Please choose..</option>
<option ng-value="{{ true }}">Payed</option>
<option ng-value="{{ false }}">Not payed</option>
</select>
Try to use ng-value="'true'" because ngValue should contain an expression to the value of
If you use ng-value="true" angular will look for variable called true in your scope($scope.true)
See https://docs.angularjs.org/api/ng/directive/ngValue
This works on select boxes as expected starting in Angular 1.6.0. Prior versions' ng-value treat the values as Strings in select boxes.
Angular 1.5.0: https://plnkr.co/edit/G52M9yaAgJjfVj82i3YF?p=preview
Angular 1.6.0: https://plnkr.co/edit/nyI4ENLW1h0z3JuyDYWO?p=preview
Update the version in the plunk to see how the types change:
<script src="//code.angularjs.org/1.5.0/angular.min.js"></script>

Angular Select Adding undefined option

I have this tempScale object defined in my controller:
$scope.tempScale = {
scaleType : [],
deviations : [],
intervals : 0
};
Which connects to my html:
<select id="scales" ng-model="tempScale.scaleType" class="form-control">
<option value="Manually Calculated" ng-selected="true">Manually Calculated</option>
<option value="Automatically Calculated">Automatically Calculated</option>
</select>
I added in the ng-selected=true so that manually calculated would be the first and selected option (basically a default option 1), however, when I run the page, my HTML looks like:
<select id="scales" ng-model="tempScale.scaleType" class="form-control ng-valid ng-dirty ng-touched">
<option value="? undefined:undefined ?"></option>
<option value="Manually Calculated" ng-selected="true" selected="selected">Manually Calculated</option>
<option value="Automatically Calculated">Automatically Calculated</option>
</select>
Why are those ng classes appearing on load, and where is this undefined option value coming from? It's not a loop, so I'm baffled.
You do not need ng-selected. Set the model from the controller as $scope.tempScale.scaleType='Manually Calculated';.
One cannot set a default selected item when using ng-model directive with select element. The select element is bind to model field, which data is undefined. What value select should display? Yes, undefined. You try to pass data via markup, it is not an Angular way.
Just keep your data in JS model, not in HTML markup.[Ref]
Plunker demo

Disable selectbox with ng-options in angularjs

Hello how can I disable a select box, so that a user can only see the actual value of the select box and can't change the content inside. It's for an ionic framework mobile application.
My select box is looking like this one here:
<select ng-class="nightMode"
ng-options="option as option.label for option in item.Options track by option.id"
ng-change="item.Call(item.SettingKey,item.Checked.id)"
ng-model="item.Checked">
</select>
I tried with ng-disabled, disable inside the ng-options, ng-readonly but none of these worked for me. So what is the correct way to achieve this?
ng-disable example:
<select ng-class="nightMode"
ng-options="option as option.label for option in item.Options track by option.id"
ng-disabled="true"
ng-change="item.Call(item.SettingKey,item.Checked.id)"
ng-model="item.Checked">
</select>
Update:
I tried one of the workarounds like suggested:
<select ng-class="nightMode"
ng-change="item.Call(item.SettingKey,item.Checked.id)"
ng-model="item.Checked">
<option ng-repeat="option in item.Options" value="option.id" ng-disabled="true" ng-selected="item.Checked.id==option.id">{{option.label}}</option>
</select>
But I can switch to a empty entry inside the select box and set the value of the selectbox to undefined.
Your code snippet not clear yet. But i can disable this select using disabled="true" .
Check out my working
http://plnkr.co/edit/xDefIzZ3YleYcyAmQYHj?p=preview
Here are better code snippet editor :
http://plnkr.co/
http://jsfiddle.net/
I guess your logic is wrong,
If you don't want to change content in selectbox, then it's not going to be a select element, just use an input and assign a model to it, then something changed, change the value of it.
<input type="text" name="selectedId" ng-model="selectedId" />
Other Implementation:
If you want to open select and don't able to select them,
then add your dynamic data to
var datas = [
{
"value" : "foo",
"id" : "0111",
"selectable": false
},
{
"value" : "foo",
"id" : "0111",
"selectable": true
}
];
Then use it on option element;
<option ng-repeat="option in item.Options" value="option.id" ng-disabled="true" ng-disabled="item.selectable">{{option.label}}</option>
Well it turned out that this was a ionic-framework item-select problem.
I found this issue to solve my problem:
https://github.com/driftyco/ionic/issues/1549
Like suggested there I end up adding a class to my select box which looks like this:
.style-disabled {
pointer-events: none;
}
And my select box is now looking like this:
<select class="style-disabled"
ng-class="nightMode"
ng-disabled="someCondition"
ng-options="option as option.label for option in item.Options track by option.id"
ng-change="item.Call(item.SettingKey,item.Checked.id)"
ng-model="item.Checked">
</select>
You can't do it the way you want, but there are some work around in previously asked question, check them 1 , 2
<div ng-app="myapp">
<form ng-controller="ctrl">
<select id="t1" ng-model="curval">
<option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
</select>
<button ng-click="disabled[curval]=true">disable</button>
</form>
angular.module('myapp',[]).controller("ctrl", function($scope){
$scope.options=['test1','test2','test3','test4','test5'];
$scope.disabled={};
})
I hope that helps, good luck

AngularJS, select onChange or ngChange

I'm new using angularjs and the angular user interface. I'm interested in the tag.
This is my html:
<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
<option value="">Provinsi</option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="part2" ui-select2 ng-model="params2.id" style="width: 200px;" ng-disabled="true">
<option value="">Kabupaten</option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
and this my app.js :
$http.get('json/provinsiData.json').success(function(datax) {
$scope.prov = datax;
});
//part2 data
$http.get('json/acehData.json').success(function(datay) {
$scope.kab = datay;
});
$scope.params = {}
$scope.params2 = {}
As you can see select part2 is disabled.
How can I create an event change that works like the condition below?
if selected option of part1 is index 0
then select part2 disabled = false and load json part2 data.
The angular-js select supports the ng-change attribute which may call any javascript method defined in scope.
Example:
However your best bet may be just to evaluate an $scope expression in your ng-disabled= attribute, e.g. ng-disabled="params.id == 'X'".
With Angular, we usually aren't looking for events to trigger changes. Instead, when the model changes, the view should update to reflect those changes.
In this case, the second element should be enabled (not disabled) depending on a value in the model. When the model value connected to the first select menu satisfies some condition, enable the second menu. Yes, technically there's an event, but we don't need to care about it, all that matters are the model's values.
Here's a simplified example of how this might work:
<select ng-model="selection.item">
<option value="">Clothing</option>
<option ng-repeat="item in clothes">{{ item }}</option>
</select>
<select ng-model="selection.size" ng-disabled="!selection.item">
<option value="">Size</option>
<option ng-repeat="size in sizes">{{ size }}</option>
</select>
The second select menu's ng-disabled attribute is a simple expression which basically evaluates to "disable me if selection.item does not have a value". That could just as easily be a more complex expression or a function.
Here's a plunkr based on the code above

Categories

Resources