My html :
<select ng-controller="category" ng-model="selectedTestAccount" ng-options="c.category for c in categories track by c.categoryID" ></select>
<select ng-controller="subcatgory" ng-model="selectedTestAccount1" ng-options="c.subcategory for c in subcategories track by c.subcategoryID"></select>
My json will look like:
json1:
category: "Restaurants"categoryID: "1"
json2:
category: "Restaurants"categoryID: "1"subcategory: "European"subcategoryID: "1"
category: "Restaurants"categoryID: "1"subcategory: "Food Carts"subcategoryID: "17"
i want two dropdowns to be created. One for first json which will display categories.
on selecting the first category i want subcategories to be listed from second json. How to make first dropdown as mandatory.
Can anyone helpme with this
So I have created you a plnker
The key is the $watch which looks at the selected value (ng-model) of the first list then changes the values for the second list based on that new value.
$scope.$watch('selectedCategory', function(newValue) {
for (var i = 0; i < $scope.subCategories.length; i++){
if ($scope.subCategories[i].name === newValue){
$scope.selectedSubCategoryValues = $scope.subCategories[i].values;
}
}
});
You just need to:
add the required attribute on the first select
put an empty <option></option> inside the select (otherwise the select has already a default option which satisfy the requirement)
Here's the example:
http://jsfiddle.net/n5568q6o/1/
You can use a watch to watch the first object. If that changes change the array for the second one.
This will change the options according to the options you want for that.
Related
The boolean value assigned to the model doesn't pre-select the corresponding option - shows first an empty option instead:
Select:
<select data-ng-model="scriptData.privacy" data-ng-options="privacyOption.value as privacyOption.label for privacyOption in privacyOptionsSelect track by privacyOption.value"></select>
Options in the controller:
$scope.privacyOptionsSelect=[
{
label:'Registered users only can view this',
value: false
},
{
label:'Anyone with the link can view this',
value: true
}
];
scriptData.privacy is set to false.
You should be careful when using the ngOptions expression with the format:
select as label for value in array
together with track by. This is because track by is applied to the value assigned to your ngModel, so if your selection is in the form privacyOption.value, the track by expression is actually applied to the value. This is the reason it doesn't successfully select the initial value.
To fix this you have two options. You can either just skip track by. This would work:
<select data-ng-model="scriptData.privacy"
data-ng-options="privacyOption.value as privacyOption.label for privacyOption
in privacyOptionsSelect"></select>
Or you could change the select as-expression to select the entire privacyOption-object. This would work as well (note the ngModel-directive changed as well):
<select data-ng-model="scriptData"
data-ng-options="privacyOption as privacyOption.label for privacyOption
in privacyOptionsSelect track by privacyOption.value"></select>
For a full (and probably better) explanation, I recommend the ngOptions documentation.
try ng-repeat instead of ng-options by applying the ng-repeat to option elements inside the select.
I have a select tag to which I am applying angular chosen.
This is my select tag
<select name="rname" id="rname" ng-model="rname" ng-init="rname='CustomReport'"
ng-options="key as value for (key , value) in reportsValuesOptions track by key" chosen>
<option value="">---Select---</option>
</select>
The above select tag is getting populated from below object
$scope.reportsValuesOptions = {'Cash Position Report':'Cash Position Report','Detail Report':'Detail Report','Reconciliation Report':'Reconciliation Report','Summary Report':'Summary Report','Sweep Report':'Sweep Report','FCCS/FBPS Detail Report':'FCCS/FBPS Detail Report','CustomReport':'Custom Report Name'};
The object is a pair of values and options for select tag where the key is options tags value and the value is the option tag text
Now I want to set the default value of the select tag to 'CustomReport' as its option value and 'Custom Report Name' as its option text from the above object, using ng-init.
I tried doing ng-init="rname='CustomReport'", but it doesn't work
How to set its value from object's key value pair?
FULL EXAMPLE
The problem with your solution is since you are giving an object and AngularJS is mostly designed for arrays it causes AngularJS not to be able to track them properly. You probably wanted to write a shorter object for reportsValueOptions but it should be an array of objects which has a form similar to the following:
[
{label: 'First Label', value:'first-option'},
{label: 'Second Label', value:'second-option'}
]
Here is the modified version of your jsfiddle with modified object that also shows which one is selected.
You can also learn more about problems with objects here: https://docs.angularjs.org/api/ng/directive/ngOptions#complex-models-objects-or-collections-
You can simply use ng-init like this
<select ng-init="somethingHere = options[0]"
ng-model="somethingHere"
ng-options="option.name for option in options">
</select>
when user expand object detail he get data about this object. To be more specific it is array of objects. Each object of this array looks like:
{
id:"6c8b7b19-17e1-4d2b-b47b-ad2c3f2e967b",
name:"TERM-xx",
overchargeTolerance:2,
pricingMethod:"ALTERNATIVE_MIN",
ratioGlassToAccessory:2,
ratioReplaceToRepair:2,
validFrom:"2016-02-02T08:55:22",
validTo:"2016-09-02T08:55:22",
vatRate:2
}
As mentioned above its array of objects so I ng-repeat over it:
<div class="row admin-sub-form" ng-show="isToogled(node.id)" ng-repeat="term in glassTerms">
And then insert values to inputs. But because sometimes value is constance from backend I cant let user write there anything so I offer selectbox with ng-options as below
<select id="pricingMethod"
class="form-control"
ng-model="term.pricingMethod"
ng-options="o as o for o in pricingMethod"
>
</select>
What I want:
When user load page it should pick from selectbox correct value automaticly. Right now it just display selectbox with possiblity to pick any value but doesnt pick anything. I have to click and pick it manualy.
p.s. If I replace selectbox with simple input as:
<input ng-model="term.pricingMethod" id="pricingMethod" class="form-control"/>
Value in that input is correctly displayed, in this case ALTERNATIVE_MIN
Any idea?
$scope.term.pricingMethod = 1; //replace 1 with the value which u want to display by default
for example if you have this list
[
{"name":"option 1","id": 1},
{"name":"option 2","id": 2},
{"name":"option 3","id": 3}
];
and you want to load "option 2" on page load, then set the model with the value 2 like this
$scope.term.pricingMethod = 2;
I have 6 select fields to select three different options ("Please Select..", "Yes" and "No"). I want to be able to know which values has been selected inside a group, each group of select is inside a div. I try using this:
$('#qqq').find('select').change(function () {
// alert($(this).val());
var option = $(this).val();
selectValues.push($(this).val());
But this only works when you change the value, and don´t storage the values, therefore if you go through the group in other order the results are different. For example if you start in the last select and then go in inverse order. Pushing the values into a variable, the values are saved but if you change twice is saved it twice in "selectValues"
My html is something like this:
<div class="mygroup">
<select id="aa">
<select id="bb">
<select id="cc">
</div>
The values of the select are generated in jQuery, therefore the values can be retrieve using --> this.val()
My question is how can I retrieve the values of a group and then go through it? I had though in save it in an array and then go through it, but I don't know if the array values are going to change when you change the select twice.
I want to know it, because if any of the select is "Yes", some below input fields should be required and if all of them are "No", those fields should be readonly.
Like this:
var curVals = {};
$('#qqq').find('select').each(function () {
curVals[$(this).prop('id')] = $(this).val();
});
or this:
var $selectedYes = $('#qqq').find('select').filter(function () {
return $(this).val().toLowerCase() === 'yes';
});
If any have 'Yes' then $selectedYes will be a jQuery object containing only those select element(s); if none are, it will be an empty jQuery object.
I have a problem where I need to post the id field of a table to update a foreign-key of a record in the db, but I'm using the ng-options attribute to populate the select's options. I searched online and found that to set the value i had to use ng-model="dataSet.desiredColumnName" to change the value to which ever other column i choose
so I have this piece of html for the select;
<select id="affiliation" ng-model="affiliationTable.affiliation_id" ng-change="alert(jQuery('#affiliation option:selected').val());" name="affiliation" ng-options="row.desc for row in affiliationTable"></select>
the problem is, I want to make a specific option selected depending on which row in my html table is clicked on. the table is defined like this;
<tr ng-repeat="row in tableData">
<!--{{row.name}}-->
<td>
{{row.name}}
</td>
<td>{{row.active}}</td>
<td>{{row.end_date}}</td>
<td>{{row.start_date}}</td>
</tr>
and invokeModal uses the selected row to determine which option to select in select#affiliation;
$scope.invokeModal = function (row) { //memberDescription
if(row == undefined){
//blah blah ...
}else{
//blah blah ...
angular.forEach($scope.affiliationTable, function (affiliation) {
if (affiliation.id == row.affiliation_id) {
$scope.affiliationTable.affiliation_id = affiliation.affiliation_id;
}
});
}
//invokes the modal window that select#affiliation is held within
jQuery("#mem").modal('show');
};
my problem is that it seems as if it's adding an empty option in the beginning of the select and making that option selected. . .wtf?
I think you ng-option expression needs to be corrected, it should be
row.id as row.desc for row in affiliationTable
The ng-model value on the select should be of same type when you assign the model property from code. You are assigning the id property of table, so on select the model should be updated with id property currently it being set to the full row object.
ng-options="value as label group by groupName for object in lists"
value can be any unique Identifier, label can be any text to display, groupname is the value based on which items need to be grouped and object is an object of the list on which traversing would be done.