<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.
Related
Below is my ng options
<select ng-init="vm.tutors = vm.tutors || 0" ng-model="vm.tutors" ng-options="tutors.fullname as tutor for (tutor, fullname) in vm.tutors" class="form-control"></select>
and below is my object
vm.tutors
[Object { fullname="NAME"}, Object { fullname="NAME2"}}]
What is the reason I keep getting the index instead of the actual value
The reason you are getting the index is because you have some syntax/concept issues.
Your code looks like it needs some love so here is a decent example of the proper way to do this:
Controller:
$scope.vm.tutors = [{fullname: "NAME"}, {fullname: "NAME2"}];
$scope.vm.selectedTutor = ""; // you can assign a value if you would like to have an option preselected.
HTML:
// in this example tutor.fullname is the Label and Value for the select option.
<select ng-model="vm.selectedTutor" ng-options="tutor.fullname for tutor in vm.tutors" ></select>
Now when you select an option the value will be assigned to $scope.vm.selectedTutor and it wont break your array.
Alternatively you can setup a key value pair relationship with your select options like so:
Controller:
$scope.vm.tutors = [{fullname: "NAME", id: "0"}, {fullname: "NAME2", id:"1"}];
HTML:
// in this example tutor.id is the Value and tutor.fullname is the Label for the select option
<select ng-model="vm.selectedTutor" ng-options="tutor.id as tutor.fullname for tutor in vm.tutors" ></select>
I hope this helps you understand what is going on here a little better, also HERE is a link to the AngularJS documentation.
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 a simple select element and I am trying to initialize the value but for some reason it is failing, i.e. not taking the init value
HTML
<select class="select-form-control"
ng-model="lossGainProb"
ng-options="item.display for item in possibility track by item.value"
ng-init="EventDetails.lossGainProb">
JavaScript
$scope.possibility = [{
display: '0%',
value: 0
}, {
display: '5%',
value: 5
}];
$scope.EventDetails.lossGainProb = 5;
Based on the given code I have created small working demo here
<div ng-app="myApp" ng-controller="myCtrl">
<select class="select-form-control" ng-model="lossGainProb"
ng-options="item.value as item.display for item in possibility">
</select>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.possibility =[ {
display : '0%',
value : 0
}, {
display : '5%',
value : 5
}];
$scope.lossGainProb = $scope.possibility[1].value;
});
You need the tracked item for the list tracked by angular. Try this:
$scope.possibility = [{
display: '0%',
value: 0
}, {
display: '5%',
value: 5
}];
$scope.EventDetails.lossGainProb = $scope.possibility.filter(function(item){ return item.value === 5})[0];
Working Codepen http://codepen.io/gpincheiraa/pen/bpbMom
There are two mistakes I see:
You are using ngInit incorrectly. It does not specify the initial binding for the ngModel directive, it is an expression which is evaluated against the scope after the scope is initialized. To specify initial model bindings, you need something like
<select ng-init="lossGainProb = EventDetails.lossGainProb"></select>
Another (better) approach is to specify this in your controller directly, like
$scope.lossGainProb = $scope.EventDetails.lossGainProb;
Your ngModel is bound to the entire "possibility" object rather than just the value property. I am assuming that you want just the value to be your model value. In this case, you should set ngOptions like
<select ng-options="item.value as item.display for item in possibility"></select>
This specifies that ngModel should be bound to item.value with item.display being used as the label.
Putting these together, your select should look like
<select class="select-form-control"
ng-model="lossGainProb"
ng-options="item.value as item.display for item in possibility"
ng-init="lossGainProb = EventDetails.lossGainProb">
</select>
Here is a working Plunker.
This will work without using ng-init - initializing in the controller:
$scope.lossGainProb = {};
$scope.lossGainProb.value = 5;
ng-init should not be used if possible - https://docs.angularjs.org/api/ng/directive/ngInit.
an alternate approach would be this one:
<select class="select-form-control" ng-init="lossGainProb = possibility[1].value" ng-model="lossGainProb" ng-options="item.value as item.display for item in possibility"> </select>
I want to simply select multiple options in a multiple select in AngularJS.
partial side :
<select name="usergroup"
ng-model="selected.data.split(',')"
ng-options="k as v for (k, v) in usergroup"
multiple>
</select>
and controller side :
$scope.selected = {data:"1,3"};
$scope.usergroup = {"1":"groupe 1","2":"groupe 2","3":"groupe 3"};
Here's the plunkr : i don't understand why i have all these js errors in the console, though the display is correct : the selected options are ok.
It seems from the error i can't use selected.data.split(',') but the selected data are ok.
This is a part of a "bigger" app, so :
the variables format are like this for a reason
$scope.selected isn't parsed (split) in the controller because, in the app, the selected data can be used untouched in other case (switch) which are not relevant here.
I would like to be able to parse the selected.data in the partial, is that possible ?
Thank you
The short answers is no, you cannot have the expression selected.data.split(',') as a ng-model attribute.
What you assign to ng-model must be a "Assignable angular expression to data-bind to".
If you have to use the provided selected.data string as an object you can use another temp variable for example $scope.userselected which then contains an array with the selected values.
<body ng-app="app" ng-controller="testController">
<select name="usergroup"
ng-model="userselected"
ng-options="k as v for (k, v) in usergroup"
multiple>
</select>
</body>
You can then add a $watch-listener to $scope.userselected and in the listener assign the correct value to selected.data:
app.controller('testController',['$scope', function($scope){
$scope.usergroup = {"1":"groupe 1","2":"groupe 2","3":"groupe 3"};
$scope.selected = {data:"1,3"}
$scope.userselected = ["1", "3"];
$scope.$watch('userselected', function(value) {
$scope.selected.data = value.join(',');
console.log($scope.selected.data);
});
}]);
Here is a working Plunker
Use ng-click inside your select-option, so whenever you select option value is pass to ng-click function.
and no need to use selected.data.split(',') in html. use this in Controller.
Here is working plunker
MarkUP
<select name="usergroup"
ng-model="selectedId"
ng-options="k as v for (k, v) in usergroup"
ng-click="selectedOption(selectedId)"
multiple>
</select>
Selected value : {{selected}}
Js
var app = angular.module('app',[]);
app.controller('testController',['$scope', function($scope){
// seleclted data
$scope.selected = {data:"1,3"};
// selected Ids
$scope.selectedId = $scope.selected.data.split(","); // pass selected ids
// userGroup
$scope.usergroup = {"1":"groupe 1","2":"groupe 2","3":"groupe 3"};
// ng-click function
$scope.selectedOption = function(data){
$scope.selected.data = data.toString();
}
}])
no need to watch manually, since ng-click is work as two-way-binding.
I am unable to update value of select from AngularJs.
Here is my code
<select ng-model="family.grade" >
<option ng-repeat="option in options" value='{{option.id}}'>{{option.text}}</option>
</select>
Here are the options which i am using to populate my select
var options = [{text:'Pre-K',id:'Pre-K'},
{text:'K',id:'K'},
{text:'1',id:'1'},
{text:'2',id:'2'},
{text:'3',id:'3'},
{text:'4',id:'4'},
{text:'5',id:'5'},
{text:'6',id:'6'},
{text:'7',id:'7'},
{text:'8',id:'8'},
{text:'+',id:'+'}];
Here is mu js code.
$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
$scope.family.grade = "1"
})
When ever value of family_member.date_of_birth changes it should set they value of select to 1. But this change is not visible on UI.
You should use ngSelected to select the option.
it could be something like this:
<select ng-model="family.grade" >
<option ng-repeat="option in options"
value='{{option.id}}' ng-selected="family.grade==option.id">
{{option.text}}</option>
</select>
Hope this helps.
I think you are looking for the track by clause of ng-options:
<option ng-repeat="option in options track by option.id">{{option.text}}</option>
However, you will still need to supply an object with an id property to set:
$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
$scope.family.grade = { id: "1" }
})
The options array indiviual elements are objects. So the respective ng-model also need to be an object. So even when it is being changed in js, the respective object has to be provided rather than a string.
Sample demo: http://plnkr.co/edit/naYcnID29SPa90co0leB?p=preview
HTML:
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.options = [{text:'Pre-K',id:'Pre-K'},
{text:'K',id:'K'},
{text:'1',id:'1'},
{text:'2',id:'2'},
{text:'3',id:'3'},
{text:'4',id:'4'},
{text:'5',id:'5'},
{text:'6',id:'6'},
{text:'7',id:'7'},
{text:'8',id:'8'},
{text:'+',id:'+'}];
$scope.family = {};
$scope.family_member = {
date_of_birth: '10-Jan-1986'
};
$scope.$watch("family_member.date_of_birth", function(newValue, oldValue) {
$scope.family.grade = $scope.options[2];
});
});