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>
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 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">
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 have a select option with the options of yes or no.
<select ng-model="selectedAnsw" ng-options="answ.text for answ in answs"></select>
$scope.answs = [
{
text: "Yes",
value: Yes
},
{
text: "No",
value: no
} ];
I want to store what the user selects in $scope.selectedAnsw and have it save + populate the select. So if the user selects No and then navigates to a different page and comes back to yes/no page No is preselected because they selected it a bit ago/it was stored. I don't need to keep the selection forever, just during this session. Thinking this might have to do with $rootScope + ng-select.
You can use service to achieve this. Create a service with setter and getter methods. Inject the service in your controller.
Now whenever user selects any option set it in service using setter, and when user comes back to same page, use getter method to get the user selection.
For setting it back to your select box you can take the object from your service and directly assign it to your ng-model.
For e.g
$scope.selectedAnsw = yourServiceValue
Below is simple snippet explaining the use of service.
var app = angular.module("myapp", []);
app.controller("testCntrl", function($scope, storeData) {
$scope.selectedAnsw = {};
$scope.answs = [
{
text: "Yes",
value: "Yes"
},
{
text: "No",
value: "no"
} ];
$scope.getAns = function() {
$scope.userAns = storeData.getUserAns();
}
$scope.setAns = function(ans) {
storeData.setUserAns(ans);
}
})
.service("storeData", function(){
this.setUserAns = function(ans) {
this.ans = ans;
}
this.getUserAns = function() {
return this.ans;
}
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="testCntrl">
<select ng-model="selectedAnsw" ng-options="answ.text for answ in answs" ng-change="setAns(selectedAnsw)">
<option value="" disabled>Select An Answer</option></select>
</select>
<div>User Selected : {{selectedAnsw}}</div>
<button ng-click="getAns()">Show user selection</button>
<div>User had Selected : {{userAns}}</div>
</div>
</div>
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];
});
});