Retrieve the index of the currently selected item in the dropdown menu

Here is my current select setup:

<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 am trying to retrieve the index value of the selected item using:

$scope.selected

However, instead of getting the index of the selected list, I am getting parameters from the database. How can I retrieve the index value? Regards

I tried following maddockst's suggestion:

$scope.filtro = function (item) {
    $scope.Catalogos.indexOf(item);
}

But when using this, I get different values instead of the index https://i.sstatic.net/385dp.png

This is how my code looks 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();
        //Retrieve the id related to the selected column
        $state.go("root.detalleregistros", { codigo: row[0].Codigo, nombre: row[0].Nombre, catalogoid: row[0].ID, catalogoselected: $scope.filtro });

    }
}

But I always receive -1 in the alert popuphttps://i.sstatic.net/vuAPT.png

Answer №1

If you look inside the function filtro, you will find a way to determine the index of the selected item within the Catalogos array. Here is the code snippet:

Make the following changes to the filtro function:

$scope.filtro = function(item) {
    var index = $scope.Catalogos.indexOf(item);
}

Answer №2

When faced with this situation, open up your web browser's developer tools, preferably in Chrome, and navigate to the console tab. Enter the command $scope.selected to view the object definition, which will reveal the selected index value.

To access the index value, use the syntax $scope.selected[0].value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Run a PHP function using <button onclick=""> tag

Is it possible to trigger the execution of a PHP script when clicking an HTML button? I am aware that simply calling a PHP function directly from the button's onclick event like this: <button onclick="myPhpFunction("testString")">Button</butt ...

The issue of AngularJS + Jade ng-repeat not populating the table is a common problem

I am currently working on populating a table using AngularJS. The data is being received by my controller through a socket connection. The format of the data is as follows: [{score: 2, team: 1, kills: 9, assists: 2, deaths: 0}, {score: 2, team: 1, kills: ...

I'm noticing that when I refresh the page, my inputs seem to disappear from the page, yet I can see that they are saved in the console's local

If anyone can help me with this issue I'm facing, I would greatly appreciate it. My aim is to retain values in the text box along with local storage even after refreshing the page. Here is an example of the code I am working with: Link to my web appl ...

The length function appears to be signaling an unanticipated error

Recently, I encountered an issue with the code execution. Although the code appears to be functioning correctly, it is throwing an uncaught error. Is there a reason for concern regarding this situation? var xmlhttp = new XMLHttpRequest(); xmlhttp.onread ...

Switch between two PHP files with a toggle feature using jQuery click event

Need help with toggling between two PHP files - cab.php and d3.php. Toggling within the same file works fine, but encountering issues when trying to toggle from one file to another. function botaod2mostraesconde() { $(".wrapd2").toggle(); $( ...

Could the comments within a NodeJS script be causing memory problems?

I specialize in creating NodeJS libraries, and my coding practice includes adding JSDoc comments for documentation purposes. Here is an example of how my code usually looks: /** * Sum * Calculates the sum of two numbers. * * @name Sum * @function * ...

How to retrieve the filename from a URL using Node.js

In my Node.js script, I have the following type of link: 148414929_307508464041827_8013797938118488137_n.mp4.m4a?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_ohc=_--i1eVUUXoAX9lJQ-u&ccb=7-4&oe=60835C8D&oh=61973532a48cb4fb62ac6711e7eba82f& ...

Validation of Date in Angular 5 (with specified minimum and maximum dates)

Struggling to find a simple solution for this issue, I have a date input like the following: <input [(ngModel)]="toolDate" type="text" class="tool_input tool_input__date"> To control the input and restrict it to only accept dates, I am using . In m ...

Best Practices for Including Authorization in HTTP Headers with Angular.JS

Currently working on a chat application that utilizes AngularJS and the Openfire XMPP server. I am looking for guidance on how to integrate the Openfire REST API into my AngularJS project. Any suggestions on how to properly send authorization in the HTTP ...

Changing HTML lists into JSON format

I am facing a slight issue with my HTML template while trying to convert it to JSON. My goal is to convert a list of HTML messages into JSON format. I appreciate your assistance in advance. HTML Template <div class="message"> <div class="mes ...

How can I retrieve the chosen value from an AJAX combobox using JavaScript in an ASP.NET C# application?

How can I retrieve the selected value from an AJAX combobox item using JavaScript in ASP.NET C#? Below is the code snippet: <asp:ComboBox ID="dropdown_dest" runat="server" Width="90%" onfocusout="blurFunction()" AutoCompleteMode="SuggestAppend" CssCla ...

Currently seeking user coordinates for Vue implementation

I recently started using Vue and I'm working on capturing the lat/long of a user to be used in other functions within Vue. Currently, I am retrieving the coordinates and plan to utilize them in an API but for now, I am just logging them. Although I c ...

Using jQuery in Angular, you can add a div element to hidden elements by appending

So, I have a hidden div that I want to show on button click. And not only do I want to show it, but I also want to append another div to it. The show and hide functionality is working fine, but the appending part seems tricky when dealing with hidden eleme ...

How come the values in my object remain inaccessible even after assigning values to it with navigator.geolocation.getCurrentPosition() and returning it?

After successfully assigning values to my pos object within the whereAmI function using navigator.geolocation.getCurrentPosition(), I can confirm that lat and lng are present inside the object. However, attempting to access these properties later on resu ...

Execute a PHP task when the Jquery toggle button is activated, all without causing the page to redirect

I have implemented a toggle button in jQuery to display additional information. It is working well, but I am now trying to process some PHP tasks in the backend without having to redirect the page where the toggle resides. I have been struggling with thi ...

myObject loop not functioning properly in Internet Explorer version 10

Could someone please point out what is wrong with this code snippet? HTML: <div id="res"></div> Javascript: var myObject = { "a" : { src : "someimagepath_a.png" }, "b" : { src : "someimagepath_b.png" }, }; va ...

What is the reason behind VueJs not having built-in support for multiple select options?

Recently delving into the world of vue, I encountered a challenge while working on an update form. When trying to pre-select multiple options using the selected attribute, I noticed that only the last option was being selected. Upon further investigation, ...

validation using ajax and php

One question I have is, when I include document.getElementById('myPassword').value); in the validarDados function, it corresponds to valor. Then I need another variable, but valor1 isn't working as expected. The result of echoing $valor1; is ...

Error: The function stripHtml cannot be found

Currently, I am developing a blog website using Next Js. I encountered an issue while creating a rich text-editor API for the blog. When attempting to utilize string-strip-html, an error message was displayed as follows: C:\Users\alami\OneDr ...

After the execution of the script by V8, which phase will be initiated first?

Scenario // test.js setTimeout(() => console.log('hello'), 0) setImmediate(() => console.log('world')) Simply execute node test.js using node v12.12.12 on an Intel MacBook Pro. The output may vary: hello world Sometimes it is: ...