I have a select like this:
<select class="form-control" ng-change="filtro(selected)" ng-init="Catalogos[0]" ng-model="selected" ng-options="item.Nombre for item in Catalogos"></select>
I wan to get select index value, I try to use:
$scope.selected
But I get params from the database instead of the index of the selected list. How can I get that Index? Regards
I try as maddockst comment:
$scope.filtro = function (item) {
$scope.Catalogos.indexOf(item);
}
But when I use it I get other values instead of index
There is how I have now:
HTML
<select class="form-control" ng-change="filtro(selected)" ng-init="Catalogos[0]" ng-model="selected" ng-options="Catalogos as item.Nombre for item in Catalogos"></select>
JS
function editar() {
$scope.filtro = function (item) {
alert($scope.Catalogos.indexOf(item));
console.log(index);
}
($("#tabla_catalogos tr.selected").hasClass("selected"));
{
var table = $('#tabla_catalogos').DataTable();
var row = table.rows('.selected').data();
var id = table.cell(row[0], 1).data();
//Toma el id referente a la columna seleccionada
$state.go("root.detalleregistros", { codigo: row[0].Codigo, nombre: row[0].Nombre, catalogoid: row[0].ID, catalogoselected: $scope.filtro });
}
}
But I always get -1 into alert
Inside filtro, you could get the index of the selected item in the Catalogos array using the following code:
Change the filtro function to:
$scope.filtro = function(item) {
var index = $scope.Catalogos.indexOf(item);
}
SO in this scenario if you go into dev tools, I assume chrome and go to your console tab. Type $scope.selected, it will give you the object definition and from there you'll see your selected index value.
It will have to be something like $scope.selected[0].value
Related
How to make a select option not disappear when selected if filtered out and not be displayed on other select dropdowns.
For example
if i have some array of objects, and i make
<select ng-options = "here we go through each object "></select>
My idea is to make filter function that would not display any item that's in the array i'm filling if I selected this item before. So that would be my array of items that should be unavailable in another dropdowns. Is there some example way how can i accomplish that? I have an idea that my filter would look something like this:
for(var i=0;i<$scope.removedIds.length;i++){
if(tab.tabID===$scope.removedIds[i].tabID)
return false;
}
return tab;
and this would be used in ng-options for ex: ng-options="tab.ID as tab.name for tab in tables | filter: "
and in my function ng-change i would be adding to $scope.removedIds next values that should not be available in next select dropdowns. But I think it would not work because values would be filter out in different select dropdowns.
Example
I guess that you have three dropdowns with same datasource, a simple solution would look like:
<div>
<select ng-model="selectedItem1" ng-options="item1 for item1 in options1"></select>
<select ng-model="selectedItem2" ng-options="item2 for item2 in options2"></select>
<select ng-model="selectedItem3" ng-options="item3 for item3 in options3"></select>
</div>
In the corresponding controller, and using angularjs watchers, add these lines:
$scope.options1 = ["opt1","opt2","opt3"];
$scope.options2 = angular.copy($scope.options1);
$scope.options3 = angular.copy($scope.options1);
$scope.$watch("selectedItem1", function(nv, ov) {
if (nv != ov) {
$scope.options2.splice($scope.options2.indexOf(nv),1);
$scope.options3.splice($scope.options3.indexOf(nv),1);
}
});
$scope.$watch("selectedItem2", function(nv, ov) {
if (nv != ov) {
$scope.options1.splice($scope.options1.indexOf(nv),1);
$scope.options3.splice($scope.options3.indexOf(nv),1);
}
});
$scope.$watch("selectedItem3", function(nv, ov) {
if (nv != ov) {
$scope.options1.splice($scope.options1.indexOf(nv),1);
$scope.options2.splice($scope.options2.indexOf(nv),1);
}
});
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 archive to have unique options in a select.
For example:
At first there is only one Select. But you can add infinitely Selects. All Selects use the same array to fill in the options.
The Array is for example [1,2].
If you know select "1" in the first Select, the second Select should only have "2" as an option.
Thanks
Example of how a filter could look like:
JavaScript
app.filter('notInArray', function() {
return function(inputArray, filterArray) {
if (inputArray) {
return inputArray.filter(function (item) {
return !filterArray || filterArray.indexOf(item) === -1;
});
}
return [];
}
});
Usage:
<select data-ng-model="mySelect" data-ng-options="item as item.Name for item in items | notInArray:mySelected">
<option value="">-- Choose option --</option>
</select>
And then maybe have a $watch on mySelect that adds it to mySelectedand sets mySelect to null. This way you only need one select. You should probably implement a way to remove options from the mySelected array also.
Example of this:
JavaScript
$scope.$watch("mySelect", function(){
if($scope.mySelect){
$scope.mySelected.push($scope.mySelect);
$scope.mySelect = null;
}
});
$scope.removeOption = function(option){
$scope.mySelected.splice($scope.mySelected.indexOf(option), 1);
}
I have a problem with my Javascript code, I have a select and I add the value of the selected option (for example Volvo) in an array but when the user change the selected option (for example Lamborghini). I want to delete the last selected option in the array and add the newest in that.
How Can I do it ?
For information, I have multiple select option and I call the function changeClass()
Thank you for your helps
My HTML code
<select class="form-control" id="car" onchange="changeClass(this)">
<option value="1">Volvo</option>
<option value="2">VW</option>
<option value="3">Lamborghini</option>
</select>
My Javascript code
<script>
var data = [];
function changeClass(select) {
data.push(select.value);
}
</script>
use this in common select function, it will get all selected value into one array
var data;
$("select").change(function () {
data = $("select").map(function () {
return this.value;
}).get();
console.log(data)
});
DEMO
You can simply empty the array by re-defining it to empty array:
function changeClass(select) {
data = [];
data.push(select.value);
}
Just use splice to replace the last element with the new one:
var arr = ["aaa", "bbb", "ccc"];
arr.splice(arr.length - 1, 1, "ddd");
console.log(arr);
logs:
["aaa", "bbb", "ddd"]
If the item was added just before the new item then you can do something like this:
<script>
var data = [];
function changeClass(select) {
data.pop();
data.push(select.value);
}
</script>
If you wish to remove the item which was not added just before then you'll have to use event onfocus, grab the previously selected value and delete it when onchange event is fired.
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);
}
}