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.
Related
nameList contains [“Julia”, “Evan”, “Tomas”];
select ng-model=“names” ng-options=“x for x in nameList”
In controller, I have a service api call GetNameByID/{id}”and depending on the id, I want to initialize the dropdown value of the modal form.
So if the user clicks ID 1, the dropdown defaults to Julia.
The problem is within the service call, when I try to initialize the model by doing $scope.names = data, it adds an empty option at the top instead of selecting Julia. When I console.log(data), it prints “Julia” but it becomes <option value=“?”></option>
How can i fix this?
So Lets have a HTML example for this case:
<div ng-app ng-controller="MyCtrl">
<select ng-model="names" ng-options="item for item in nameList">
</select>
<p>Selected : {{names}}</p>
<button ng-click="Update(2)"> Update(1)</button>
</div>
and Conrtoller has one service call which update your dropdown accordingly based on index.
function MyCtrl($scope) {
$scope.names = "Julia"
$scope.nameList = ["Julia", "Evan", "Tomas"];
$scope.Update = function(_value){
$scope.names = $scope.nameList[ parseInt(_value)] ;
}
}
Please have a look into running code, jsfiddle.
You can just use ng-init to initialize the dropdown first value like so:
<select ng-model="names" ng-init="names = data[0]" ng-options="x for x in data">
<option value="">Select</option>
</select>
Where [0] in data[0] is the position of the array.
Here is an example where you can set the option
In html file
<select ng-model="selectedName" ng-options="x for x in nameList"></select>
In js file
app.controller('myCtrl', function($scope) {
var id = 1;
$scope.names = ["Julia", "Evan", "Tomas"];
$scope.selectedName = $scope.names[id-1]; <---- here you can pass you id.
});
subtract id with 1 because array start with 0. Hope this is what you want to acheive.
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>
How to update new value choosing from select box on click save button.
I am using ng-click function like this in my JS function for update button:
$scope.updateDealDetail = function updateDealDetail (){
$scope.showEditView = !$scope.showEditView;
$scope.dealDetail.decisionMakerDetail.email = $scope.selectedid;
}
My function for edit button:
$scope.editUserDetail = function editUserDetail(){
$scope.showEditView = !$scope.showEditView;
$scope.showSubmitView = !$scope.showSubmitView;
deal.getIdData($scope.accountDetail. accountUsers[0].role,$scope.accountDetail.id).then(function successCb(data){
$scope.editIdOptionsData=data;
$scope.selectedid = $scope.editIdOptionsData[0].email;
});
};
and my HTML for bitton click is like this :
<select ng-model="selectedid" class="form-control">
<option ng-selected="selectedid" ng-repeat="eiod in editIdOptionsData" value="{{eiod.email}}">{{eiod.email}}
<button ng-click="updateDealDetail(eoid.email)" ng-disabled="dealDataSaveButtonDisabled">Update</button>
I am trying to this through ng-repeat because of by using ng-options my data through API is now showing in the box. But My data which is on first index is only getting set. What to do to set the a default value for the selection box and by selection any value, onclick need to update that value.
Don't use ngRepeat to render options, this is your problem. Correct code would be:
<select class="form-control"
ng-model="selectedid"
ng-options="eiod.email as eiod.email for eiod in editIdOptionsData">
</select>
Best practice to use ng-options, ng-model and ng-change on the <select> element
Online demo - https://plnkr.co/edit/Gaa8sMgerRv6chio4iYa?p=preview
html
<select
ng-model="selectedItem"
ng-change="onSelectedItemChanged()"
ng-options="item as item.email for item in items"></select>
js
app.controller('MainCtrl', function($scope) {
$scope.items = [{
email: 'asd1#asd.com'
}, {
email: 'asd2#asd.com'
}];
$scope.selectedItem = $scope.items[0];
$scope.onSelectedItemChanged = function() {
alert('you changed it to ' + $scope.selectedItem.email);
}
});
<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 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];
});
});