I have a dynamic combo box. I want to initialise the value of all combo boxes like this the image below is from adding static values like this
$scope.newObject ={ 0 : "N/P" ,1 : "N/P",2 : "N/P",3 : "N/P"}
so I tried to make for on each item on the list in this code below:
$scope.inifonction = ["N/P","N/A","OK","KO"];
//this is the option inside the combobox
$scope.displaydata = function(index) {
$scope.id = index;
$http.get("/fonctions?id=" + $scope.id).success(function(data) {
$scope.list = data;
for(i=0;i<$scope.list.length;i++)
{
$scope.tab = $scope.list[i].idfonction
//this to get the id of the list in a tab
console.log($scope.tab)
//[1,6,5,3] exemple of data in the console
$scope.newObject ={ tab : "N/P"}
}
});
but I didn't work and it looked like this:
and here's my HTML
<select ng-model="newObject[l.idfonction]" ng-options=" fct for fct in inifonction " class="form-control">
when I insert the data am getting this as a result of that ng-model
Object {1: "N/A", 2: "OK", 3: "N/A", 4: "N/P", tab: "N/P"}
Add this line to every dropdown option in the view:
<option value = "">N/P</option>
UPDATE:
I can see that you have an array specific for the initial values. You could use that to set the value as:
<option value = "">{{inifonction[0]}}</option> //This prints N/P
More, you could set to a scope and use it as :
$scope.tab = "N/P";
<option value = "">{{tab}}</option>
this fixed my issue i hope it helps you all
<select ng-init="newObject[l.idfonction] = inifonction[0] " ng-model="newObject[l.idfonction]" ng-options=" fct for fct in inifonction " class="form-control">
Related
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);
}
});
I have one problem in AngularJS. How to pass list value in html select method
Here is my code,
app.js
$scope.subcategory = function() {
var query = "SELECT unit FROM Length;";
$cordovaSQLite.execute(db, query).then(function(res) {
if (res.rows.length > 0) {
var message = "SELECTED -> " + res.rows.item(1).unit;
$scope.list = message;
}
});
}
index.html
<select ng-change="subcategory()" ng-options="x.list for x in subcategory"></select>
You can use function param's to make this work or $scope. For example, parsing subcategory.id (I don't know if id attributes does exists for you) to subselect categories by categoryId. You should also define a model by using ng-model.
View
<select ng-options="x.list for x in subcategory"
ng-model="selectedItem"
ng-change="subcategory()">
</select>
Controller
$scope.subcategory = function() {
//you can also access categoryId with
var query = "SELECT unit FROM Length WHERE id = "+ $scope.selectedItem.id+";";
$cordovaSQLite.execute(db, query).then(function(res) {
if(res.rows.length > 0) {
var message = "SELECTED -> " + res.rows.item(1).unit ;
$scope.list=message;
}
});
}
<select ng-options="x.list for x in subcategory" ng-model="selectedItem" ng-change="subcategory()"></select>
You can have access to the selected option fron inside the subcategory() function like this:
$scope.subcategory= function() {
//use the selectedItem as you like
console.log($scope.selectedItem.id);
}
In your ng-options you are making use of subcategory whereas in your JS, there is no variable named with subcategory but it's a method.
One cannot simply refer the method, unless it returns the list.
What you actually need is a variable, that contains the object list, that can be looped in the select to get the drop-downs.
Moreover, on using ng-change, you are not passing any id. A better way to do, is to bind the select with a ng-model, on change, you can have a watch on this variable.
You should modify your code somewhat like the following:
HTML:
<select ng-model="someObject.model" ng-options="x.list for x in subcategory"></select>
JS:
$scope.subcategory = ['list:'[{ 'obj1': 'var1' }, { 'obj2': 'var2' }, { 'obj3': 'var3' }]];
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.
In Angularjs I have a select control:
<select ng-model="modtipoProdotto.Ruoli" ng-options="ruolo.Name for ruolo in ruoli" class="form-control" multiple size="8"></select>
That I populate with url request in the controller:
gestionale.controller('productController', function($scope, $http, Restangular){
...
...
$scope.ruoli = "data from url";
}
The object $scope.ruoli has 8 elements.
Now I want select an item in the select control and for example, in the angularjs controller, i've tried:
$scope.modtipoProdotto.Ruoli = $scope.ruoli[0];
Why this doesn't works?
To set the default option in the <select> do this:
$scope.modtipoProdotto.Ruoli = "someValue";
To get the selected value from the <select> do this:
var someValue = $scope.modtipoProdotto.Ruoli
Also the ng-options variable has to be an object array, not a string.
try changing $scope.ruoli = "data from url"; to this:
$scope.ruolo = [
{
text : 'SomeText',
value: 'SomeValue'
},
{
text : 'SomeOtherText',
value: 'SomeOtherValue'
},
]
And change your html to this:
<select ng-model="ruoli.value" ng-selected="0" ng-options="ruoli.value as ruoli.text for ruoli in ruolo"></select>
I am trying to use jquery to populate the dropdown box with the following JSON data
{
"Name":["A","B","C"],
"Movie":["X","Y","Z"]
}
And this the script what I have done so far
$("#firstbox").change(function(){
var $selection=$(this);
$.getJSON("data.json",function(data){
var i=$selection.val();
var arr=[];
switch(i){
case 'Name':
arr=data.Name.split(",");
break;
case 'Movie':
arr=data.Movie.split(",");
break;
}
});
});
My basic index.html is just like this
<select id="firstbox">
<option selected value="">---Select---</option>
<option value="Name">Name</option>
<option value="Movie">Movie</option>
</select>
<select id="secondbox" name="">
<option selected value="">---Generate---</option>
<script src="myjs.js"> </script>
</select>
The 'secondbox' drop-down should generate the value corresponding to the selections of 'firstbox' drop-down. The error I received is 'undefined split function'. Can anyone give me a hint ?
Thanks
split is a method of the String object, here you use it on the Array object.
You dont need to split as the Name and Movie keys are allready arrays in the JSON object.
$("#firstbox").on("change", function(e){
var sel=$(this).val();
$("#secondbox").empty();
$.getJSON("data.json",function(data){
var values=data[sel] || ['Error : key not found'];
$(values).each(function(index,element) {
$("<option />", {value: element, text:element}).appendTo("#secondbox");
});
});
});
Here is a working exemple : http://jsfiddle.net/cKBeE/
$("#firstbox").on("change", function(e){
writeOptions();
}
function getJSONData(firstboxval) {
//make ajax call to get data for second dropdown
//that corresponds to the value selected in firstbox
//then make function return the array of options
}
function writeOptions() {
var firstboxval = $("#firstbox").val();
var optionValues = getJSONData(firstboxval);
var dropDown = document.getElementById("secondbox");
for(var i=0; i<optionValues.length; i++) {
var key = i;
var value = optionValues[i];
dropDown.options[i] = new Option(value, key);
}
}