For now the select is blank, I think angular added it by default. I want the default to be American, but I trid ng-selected="country.name == 'American'" it doesn't work?
my DOM
<select name="country" ng-model="user.country"
ng-options="country.name for country in country_list" >
{{name}}
</select>
http://jsbin.com/tocojojora/edit?html,css,js,console,output
You can do this, ng-init="value='American Samoa'" this will set the default value in dropdown
<select ng-model="value" ng-init="value='American Samoa'" ng-options="code.name as code.name for code in country_list">
</select>
DEMO
$scope.user = {country: $scope.country_list[4]};
Set the default user country in your controller(less logic in your html template).
JSBin
The reason your code was not working was because of this:
ng-options="country.name for country in country_list"
In my understanding, here value will be {name: 'Afghanistan', code: 'AF'} and not Afghanistan or AF.
You should try something like this:
ng-options="country.code as country.name for country in country_list"
Here value will AF and you can use ng-init to set it as
user.country = 'AS'
Sample Fiddle.
use something like this in your controller
$scope.user = {country:"American"}; //Default value to dropdown
Related
Sorry for asking again . But I cant set default value for select . Here is code I used
Plnkr
I cant use ng-options in this case . Please help me without ng-options
If the model has the value same as option defined, ng-selected would work as:
ng-selected="business_entity == businessConstants"
given the model is such :
$scope.formData = {business_entity : 'Công ty TNHH'};
Forked Plunker
Try to use the code in your controller as below,
$scope.formData={};
$scope.formData.business_entity = 'Công ty TNHH';
And please remove 'ng-selected' from your option tag from your tempalte.
<select ng-model="formData.business_entity">
<option ng-repeat="businessConstants in businessConstants" value="{{businessConstants}}">
{{businessConstants}}
</option>
</select>
I've update your plnk please check..
remove ng-select and assign array reference to ng-model variable
$scope.formData = {
'business_entity' : $scope.businessConstants[1]
}
Html
<select name="" id=""
ng-model="formData.business_entity">
<option
ng-repeat="businessConstants in businessConstants"
value="{{businessConstants}}">
{{businessConstants}}
</option>
</select>
Demo
Change your HTML to
<body ng-controller="ctrl">
<select name="" id=""
ng-options="option for option in businessConstants"
ng-model="business_entity">
</select>
</body>
Your options will be automatically generated and the select will be bound to business_entity automatically
Change Controller to
function ctrl($scope) {
$scope.businessConstants = [
'Công ty Cổ phần',
'Công ty TNHH',
'Tổ chức nhà nước',
'Ngân hàng',
'Trường học',
'Cá nhân',
'Khác'
];
$scope.business_entity = $scope.businessConstants[4];
}
This will set the default value. Make sure you select the default value from the existing collection businessConstants and not assign it.
You can refer updated Plunker link
I'm trying to get a select box working in Angular. The problem I'm experiencing is to do with ng-init and setting it's default value from an object which is created during runtime. Heres my code:
<select
ng-model="settings.editing.panel.data.production_company"
ng-change="settings.editing.panel.data.production_company = selectValue"
ng-init="selectValue = settings.editing.panel.data.production_company"
>
<option
ng-repeat="(key, value) in lists.production_companies"
value="{{key}}"
ng-selected="{{selectValue}}"
>
{{value}}
</option>
</select>
"lists.production_companies" is a simple key-value array of names, populated during initial page render, updated by ajax.
The object "settings.editing.panel.data" starts its life as NULL, but later is loaded with a correctly formatted object which contains the property "production_company".
I have found setting ng-init to something like "ng-init="selectValue = 3" works fine. Setting a $scope.test = 3, then setting "ng-init="selectValue = test" works fine too.
However, my dynamic value does not work. How can I use my dynamically created object to set the value of this select box during runtime with the set-up I have?
<select
ng-model="settings.editing.panel.data.production_company"
ng-options = "option as option.keyName for option in list.production_companies"
> <!--set keyName equal to your object's key-->
</select>
Then in your controller
$scope.settings.editing.panel.data.production_company = list.production_companies[0] // Or which value you want to assign
You question confused me somehow. The following snippet is a working one, is that what you want?
'use strict';
angular.module('DemoApp', []);
angular.module('DemoApp').controller('DemoCtrl', ['$scope', function($scope){
$scope.lists={
production_companies: { "0": "prod 1", "1":"prod_2" },
};
$scope.settings={
editing: {
panel: {
data: null
}
}
};
$scope.setData=function(data){
$scope.settings.editing.panel.data={
production_company: data
};
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<select ng-model = "settings.editing.panel.data.production_company">
<option ng-repeat = "(key, value) in lists.production_companies" value = "{{key}}">{{value}}</option>
</select>
<div>You select: {{settings.editing.panel.data.production_company}}</div>
<button ng-click="setData('0')">Set Data to Prod1</button>
<button ng-click="setData('1')">Set Data to Prod2</button>
</div>
In my circumstances I was able to change my backends data format to set an object like:
{"id": 1, "name":"prod comp 1"}
and then change my select model accordingly. In hindsight I needed this for the ID anyway.
<select
ng-model="settings.editing.panel.data.production_company"
>
<option
ng-repeat="option in settings.lists.production_companies"
value="{{option.id}}"
ng-selected="{{option.id}} == settings.editing.panel.data.production_company"
>
{{option.name}}
</option>
</select>
I have an array like below.
$scope.set = [
{"name":"name1", "value":"value1"}
{"name":"name2", "value":"value2"}
{"name":"name3", "value":"value3"}
]
I am trying to show the options based on previous selection. for example if i select name1 then for the next time i don't want to show the selected option. I want to show only remaining two names i.e, name2 and name3.
I'm trying to achieve this by using some filters but it is effecting the model $scope.set
Please help me in this. thanks in advance.
A possible solution for you problem can be found here on Fiddle. I've created something quickly from scratch since your post did not have an original Fiddle.
<div ng-app ng-controller="Controller">
Select value : <b>{{myDropDown.name}}</b><br/><br/>
Showing all other available options:
<select ng-options="item.name for item in items | filter: {name: '!' + myDropDown.name}" ng-model="myDropDown">
<option value="">Select other value</option>
</select>
</div>
function Controller ($scope) {
$scope.myDropDown = 'one';
$scope.items = [
{"name":"name1", "value":"value1"},
{"name":"name2", "value":"value2"},
{"name":"name3", "value":"value3"}
];
}
<select class="select" data-ng-model="sites.webSites.addable.languages"
ng-options="language as language.label for language in languages" >
</select>
$scope.languages = [
{
value : 'lang_en',
label : 'English-en'
},
{
value : 'lang_es',
label : 'Spanish-es'
},
];
Clicking on a button I have to make the item selected
I have tried like this
var sitevalue = 'lang_es'//dynamic
$('.select').val(sitevalue);
But it is not working ,please suggest.
Change your select to something like this:
<select data-ng-model="sites.language"
ng-options="language.value as language.label for language in languages" ></select>
Then this should work inside your controller:
sites.language = 'lang_es'
Here is a working jsfiddle
Update:
When you are writing language as language.label for ... you are telling angular to map ng-model to object like { value : '...', label : '...' }. Which would be tracked per reference, means you have to assign to ng-model exacltly the same instance that you specified. Here is jsfiddle from angular team illustrating this.
You can use simple assignments to value propery to cange selected value by using this inside ng-options: language.value as language.label for ...
And you don't want to write jquery selectors or manipulate DOM, try avoid $('.select').val(sitevalue); when using angular. Use native js-models instead and rely on framework to do the rest.
Your model should be set to the exact object (by reference) that you would like to select, not only to the value.
Make you HTML like this:
<body ng-controller="TestCtrl">
<select class="select" ng-options=" language.label for language in languages" ng-model="selectedValue"></select>
<button ng-click="selectedValue = defaultValue">Select Default</button>
</body>
and your controller like this:
function TestCtrl($scope) {
$scope.languages = [
{
value : 'lang_en',
label : 'English-en'
},
{
value : 'lang_es',
label : 'Spanish-es'
},
];
$scope.selectedValue = {};
$scope.defaultValue = $scope.languages[1];
}
This will do the job. Working plunkr: http://plnkr.co/edit/8HrQUGMx4jGmJv3fbdDq?p=preview
$scope.sites.webSites.addable.languages = 'lang_es';
selected value is associated with data-ng-model
ng-options should be "language.value as language.label for language in languages".
data-ng-model (or just ng-model) should be "selectedLanguageValue".
In the controller, get the value of $scope.selectedLanguageValue.
I have an angular app that contains a form, which has a select. I can choose one of the selects, and its updated in the model perfectly. But the next time i go in the form its suppose to be "pre filled" as the data already exists. And all the data is filled ok, but angular doesn't seem to recognise that the value of the model corresponds to the value of the select.
html/angular:
<select ng-model="userData.country"
ng-options="country as country.name for country in countries">
</select>
data
[
{"iso":"DK","name":"Danmark"},
{"iso":"DE","name":"Germany"}
]
The wanted behaviour is that once I set this data to userData.country, that the form will come pre-selected with the correct country that the user chose in the previous form.
In Your HTML you need to add country.iso instead of country
<select ng-model="userData.country"
ng-options="country.iso as country.name for country in countries">
</select>
And in your controller
$scope.userData = {"country":"DK"}; // this can be filled with prefilled data. which can be fetched from db or stored in a service
In case you want to save the whole object instead of just the iso code here is an example:
http://jsfiddle.net/2ES4t/
JS File:
$scope.countries = [{
iso: "DK",
name: "Danmark"
}, {
iso: "DE",
name: "Germany"
}];
$scope.userData = {};
$scope.userData.country = $scope.countries[0];
HTML File:
<select ng-model="userData.country" ng-options="country as country.name for country in countries"></select>
I would suggest storing the whole object, that you wouldn't have to search the country array later if you needed the name and only had the ISO code.
You probably are not filling the form in the Angular Way.
To do this, you should set the model (and the form will be pre-filled):
In your controller:
$scope.countries = [
{"iso":"DK","name":"Danmark"},
{"iso":"DE","name":"Germany"},
{"iso":"PT","name":"Portugal"},
{"iso":"CN","name":"Canada"}
];
$scope.userData = {};
$scope.userData.country = $scope.countries[3];
Fiddle
Try to change your html/angular to
<select ng-model="country"
ng-options="country.name for country in countries" ng-change="countryChanged(country)">
</select>
and your controller:
$scope.countryChanged = function(country){
$scope.userData.country = country
}