let's say with the select option(dropdown) on the visualforce page I have INDIA, USA, UK. if I select INDIA that should be displayed in visual force page and if I open again dropdown the selected value or displayed value on visualforce page, it should not display INDIA, it should display the only USA and the UK
You could do that using javascript in your visualforce page.
you need to include a js file like this:
<apex:includeScript value="{!$Resource.MyJavascriptFile}"/>
Store the values as options like this:
Options = [
{ label: '1', value: '1' },
{ label: '2', value: '2' },
{ label: '3', value: '3' },
{ label: '4', value: '4' },
];
Then your code need to detect a selected option you could do this like this:
var options = document.getElementsByName('{!$Component.foo}')
for(option in options)
if(options[option].selected)
alert('The selected value is: ' + options[option].value)
Once a value is selected you need to deleted from the option array like this:
let Selectedvalue = 3
let arr = [1, 2, 3, 4, 5, 3]
arr = arr.filter(item => item !== value)
Related
I started to work with ui-grid a few time ago so i'm having some problems.
I would like to filter the options in dropdown of every row of the grid.
I can filter the values and show it in the dropdown field but when i click in dropdown only appear undefined values. What can i do to solve this problem?
I've tried so many things but i can't find the solution.
Here is the plunker
http://embed.plnkr.co/HMsq4OasNs50ywJuI3DS/
Thanks
I forked your plunker.
In summary, I changed up the column definition to use editDropdownOptionsFunction instead of the combination of editDropdownOptionsArray and cellFilter. According to the documentation,
cellFilter is a filter to apply to the content of each cell
... so that doesn't seem like what you were trying to achieve.
Also, changed the periodos definition for rowEntity.sindicato === 1 to be an array rather than an object.
editDropdownOptionsFunction: function(rowEntity, colDef) {
console.log(rowEntity);
if (rowEntity.sindicato === 1) {
periodos = [{
id: 1,
value: 'teste1'
}];
} else if (rowEntity.sindicato === 2) {
periodos = [{
id: 2,
value: 'test2'
}, {
id: 5,
value: 'test5'
}];
} else {
periodos = [{
id: 3,
value: 'test3'
}, {
id: 6,
value: 'test6'
}, {
id: 4,
value: 'test4'
}];
}
return periodos;
}
I have a product model that has a property I want to bind to a separate array of options. Basically by product model has a property called 'category', like this:
productModel = {
Id : 1,
Description: 'Widget',
Category: 0,
...
As you can see, the property is an int (from the db) but I also get a separate array of what the categories are:
Categories : [
{ "Number" : 0, Name : "N/A" },
{ "Number" : 1, Name : "Option 1" },
{ "Number" : 2, Name : "Option 2" }
]
I want to be able to have a select list with the corresponding value shown, so if the product model comes back with 0 set then the default value in the select list will be "N/A".
I have achieved this by doing:
<select ng-model="Categories[productModel.Category]" ng-options="v.name for v in Categories" ...
but the problem with this is that when I change the option the value isn't binding back to the model. Because the data is posted back the server when the user changes the value I don't really want to change the productModel to have the same Name and Number structure as the categories (I can do this if it is the best way). I really just want the user to be able to select an option and for the product model to contain the corresponding number.
Can I (should I) do this using the 'track by'?
You need to update your ng-model value to bind to productModel.Category, you also need to update your ng-options expression to the following ng-options="v.Name as v.Number for v in categories".
You can find more information regarding the ng-options and ng-model directives here.
Please see working example here
HTML:
<div ng-controller="TestController">
<select ng-model="productModel.Category" ng-options="v.Name as v.Number for v in categories"></select>
<h3>productModel.Catecogy => {{productModel.Category}}</h3>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.productModel = {
Id: 1,
Description: 'Widget',
Category: 0
};
$scope.categories = [{
"Number": 0,
Name: "N/A"
}, {
"Number": 1,
Name: "Option 1"
}, {
"Number": 2,
Name: "Option 2"
}];
}]);
Not relevant to the question but its good practice to try and keep the case of your properties and variable names the same.
I am creating select element and set the values with array
In my controller I set
$scope.numbers = _.range(20);
$scope.selectedNumber = 5;
and my html
<select ng-model='selectedNumber'
class='some-class'
ng-options="item as item for item in numbers" >
</select>
the css of the class is
.some-class{
border:1px solid gray;
border-radious:xxx;
width:xxpx;
heihgt:xxpx;
}
my problem is that the selected value does not rendered on page load
only after clicking inside the select element.
(also happens when I use ng-class instead of class).
if I remove the class then then it just renders fine.
(another quick question : why if I don't add ng-model the ng-options does not display any content
I've prepared few examples for you that I hope will help you understand, I don't know what's your $scope.numbers type if it's an array of integers, strings, or objects but the model has to be the same type, and if you want model to be object then it has to be passed by reference. Although to answer your question ng-model is mandatory when ng-options are used, if you don't want model you can use this pattern
<select>
<option ng-repeat="number in numbers">{{number}}</option>
</select>
And here are different input types for the select, please visit plunker to see it working
$scope.numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
$scope.selectedNumber = 5
$scope.numbersTwo = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
$scope.selectedNumberTwo = '6'
$scope.numbersThree = [{
num: 0
}, {
num: 1
}, {
num: 2
}, {
num: 3
}, {
num: 4
}, {
num: 5
}, {
num: 6
}, {
num: 7
}, {
num: 8
}, {
num: 9
}, {
num: 10
}]
$scope.selectedNumberThree = $scope.numbersThree[7]
$scope.selectedNumberFour = 8
http://plnkr.co/edit/7mzuj8Fg46xVv6bwhiOt?p=preview
ng-options needs to be matching with ng-model in order to render the value.
For example if you ng-model is giving value of "Boston", you need to have that key/value pair or just the value in the object/array of your ng-options list. Its case sensitive as well.
Controller:
$scope.city = "Boston";
$scope.cityDetails = service.cityList;
Service:
$scope.cityList = {"Boston", "San Jose", "Chicago", "New York"};
so while trying to loop down, you need to loop in this way.
<select ng-model="city" ng-options="cityData for cityData in cityDetails"></select>
I'm binding a select element to data that looks like this:
var gearConditions = [
{ id: 1, value: 'New' },
{ id: 2, value: 'Like New' },
{ id: 3, value: 'Excellent' },
{ id: 4, value: 'Good' },
{ id: 5, value: 'Fair' },
{ id: 6, value: 'Very Used' },
{ id: 7, value: 'Other' }
];
My select looks like this:
<select name="condition"
class="form-control"
ng-model="postModel.condition"
ng-options="condition.id as condition.value for condition in gearConditions">
</select>
This binds condition.id to the ng-model and displays condition.value as the select option. My question is: can I keep the current behavior but bind the whole object to the ng-model?
For example if the first option is selected the model value would then be {id:1, value: 'New'} rather than just 1.
Is this possible or do I need to use ng-changed to accomplish this?
Thanks!
Yes, change condition.id to condition:
ng-options="condition as condition.value for condition in gearConditions"
I think you you try similar:
// I took this from my code
ng-options="key as value for (key, value) in ...
Now you could try to combine key+value and see if it appears like you wish.
I have an JSON array from where i am creating Dropdown and default selected using ng-model
$scope.repeats = [{
'title': 'Never',
'value': 'Never'
}, {
'title': 'Daily',
'value': 'Daily'
}, {
'title': 'Weekdays (M-F)',
'value': 'Weekdays'
}, {
'title': 'Weekly',
'value': 'Weekly'
}, {
'title': 'Monthly',
'value': 'Monthly'
}, {
'title': 'Yearly',
'value': 'Yearly'
}, {
'title': 'Hourly',
'value': 'Hourly'
}, {
'title': 'Minutely',
'value': 'Minutely'
}];
$scope.def_sele = $scope.repeats[0]
In the view:
<select ng-model="def_sele" ng-options="repeat.title for repeat in repeats"></select>
From the above code the default selected dropdown is Daily. Till here it was all fine.
But i am creating an TODO application where each TODO has different selection(Never, Daily etc.. from above $scope.repeats)
So, how to set default selected for each TODO ????? Because the above example i've given it applies every where and i get Daily selected on each TODO, but i want to select different different for each TODO, how to do that????
Updated
My code is like:
<ul ng-repeat="todo in todos_detail">
<select ng-model="todo.dropdown_position_index" ng-options="repeat.title for repeat in repeats"></select>
</ul>
In the above example for each todo has a different dropdown_position_index, so i want the dropdown is selected = selected using todo.dropdown_position_index.
You need to make sure the value you're selecting in your <select> lines up with the value in your selected todo.
I haven't seen your code, so I put together a working example in jsbin.
The basic idea is this:
<select ng-model="X" ng-options="x.A as x.B for x in Z"></select>
Where:
Z = your collection of options
x = an individual item variable from Z
x.A = the value of the option
x.B = the text of the option
X = the value to update AND read from
as long as the array Z has an object in it x where the property x.A is equal to X, it will be selected.
... or for a less confusing answer, check the code example. ;)
Best of luck
given for the example object structure
$scope.todos = [{
'title': 'Weekly',
'value': 'Weekly'
}, {
'title': 'Yearly',
'value': 'Yearly'
}];
you could do something like this
<div ng-repeat="todo in todos">
<select ng-model="todo.value" ng-options="repeat.value as repeat.title for repeat in repeats"></select>
</div>
here an example plunker