Retrieving the $index value for the chosen option in Angular

Consider this scenario:

<input ng-model="selectedColor" type="text"></input>

This approach will not produce the desired outcome:

<p ng-click="changeColor($index)">change color</p>

Is there another way to access $index without using a loop?

Answer №1

Instead of keeping track of the index, you can easily remove the selectedCategory from the categories model by modifying the removeCategory function:

Check out this example controller on JSFiddle:

app.controller("myCtrl", ['$scope', function($scope){
  $scope.model = {
    selectedCategory: {},
    categories: [
        {title: "Cat1"},
        {title: "Cat2"}
    ]
  }
  //init
  $scope.model.selectedCategory = $scope.model.categories[0];

  $scope.removeCategory = function(){
    var ind = $scope.model.categories.indexOf( $scope.model.selectedCategory );
    $scope.model.categories.splice( ind, 1 );
    $scope.model.selectedCategory = $scope.model.categories[0];
  }
}])

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

The ENOENT error code 4058 occurred while attempting to create a new react application using

Every time I run the command npm create-react-app my-app, I encounter an error like this: npm ERR! code ENOENT npm ERR! syscall spawn C:\Windows\System32; npm ERR! path C:\Users\Administrator\Documents\th-wedding\templa ...

How can I represent non-ASCII characters in Java Script using encoding?

Imagine if ch = á the desired result is = \u00e1 however the current output = %E1 when escape(ch) is used and current output = %C3%A1 when encodeURIComponent(ch) is used I am working with an API that supports Unicode characters. ...

Alter the hues of the triangles on a threeJS plane

Is there a way to create a multicolor plane by changing the colors of the triangles within a mesh? Can the colors of triangles be adjusted in a PlaneGeometry object? ...

Explain the concept of render hijacking in react technology

After learning about High Order Components (HOC), I came across the concept of render hijacking. Can someone please explain what exactly render hijacking entails? ...

Python Flask login screen not showing error message

Currently, I'm in the process of developing a login screen that incorporates Bootstrap and utilizes jQuery keyframes shaking effect. The backend functionality is managed by Flask. However, I seem to be encountering an issue where the error message "Wr ...

How can I pull all data from an array using MongoDB query?

I have multiple arrays, but I am only interested in extracting the content related to "PIZZAS." Can anyone advise me on the appropriate query to achieve this? https://i.stack.imgur.com/wHolE.png ...

Manipulating the DOM with AngularJS directives is not functioning as expected

I am facing an issue with integrating a code that needs to scroll slowly on the page using AngularJS 1.4. When I try to include this code in a directive using the link function(scope, element, attrs), it doesn't work properly. Interestingly, the code ...

Unexpected issue: Ajax success function not displaying anything in the console

My code seems to be running without any output in the console. I am attempting to verify the data in order to trigger specific actions based on whether it is correct or not. However, the if-else conditions are not functioning as expected. Below is a snip ...

Creating an HTML5 video tag with bearer authentication using a WebAPI: The ultimate guide

My ASP.NET WebAPI requires bearer authentication, and most of my requests towards the API follow this format: GET http://localhost:29080/api/v1/users/me HTTP/1.1 Host: localhost:29080 Connection: keep-alive Accept: application/json, text/plain, */* Origin ...

Issue with displaying value from page in AngularJS modal when clicked

How can I get the data copied from my page's $scope element (thisRequest) into my modal's $scope element (nTask) to display correctly in the modal after clicking a button in AngularJS? You can view the code on this Plunker. Here is an example o ...

Utilizing asynchronous programming for scenarios where two requests need to be sent, with the response from the first request being required for the second request

I have an async function that looks like this: exports.myFunction = async (req, res, next) => { if (some condition) { next() } try { const results = await axios.get(`https://a-domain.com/url/path`); const info = results.data; c ...

Using ThreeJS to project a mouse click onto the XZ plane

I am currently working on implementing offline routing in a 3D map within a ThreeJS scene. My goal is to allow the user to click on a point and have a cube navigate to that point. While the navigation functionality is working correctly, I am facing an issu ...

Serving files from a Node.js server and allowing users to download them in their browser

I am facing an issue with my file repository. When I access it through the browser, the file automatically downloads, which is fine. However, I want to make a request to my server and then serve the file result in the browser. Below is an example of the GE ...

What is the best way to showcase all tab content within a single tab menu labeled "ALL"?

I have created a tab menu example below. When you click on the button ALL, it will display all the tabcontent. Each tab content has its own tab menu. Thanks in advance! function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = doc ...

The presence of asynchronous JavaScript can lead to errors due to missing functions in JavaScript

I've encountered an issue with a jQuery script that I modified by adding an ASYNC attribute. Surprisingly, it functions correctly in Firefox but encounters intermittent failures in both Chrome and IE browsers. Here's the PHP code snippet respons ...

Create a random number within a specified range using a different number in JavaScript

I am looking for a unique function that can generate a number within a specified range, based on a provided number. An example of the function would be: function getNumber(minimum, maximum, number) { ... } If I were to input: getNumber(0, 3, 12837623); ...

Sorting data within an Angular directive using a filtering service

I have created a custom directive called <jobs type="1" /> to display a specific set of data based on the attribute value. The 'type' attribute determines which type of job the user should see, and I'm using the following code in my te ...

.post method reveals parameter in URL upon submission

Currently, I am utilizing the $.post method to send a value to a PHP page for processing after replacing the serialize utility with a more specific element: $("button").click(function(event) { $.post( "php/index.php", { seq: $("seq").v ...

React-Troubleshooting list items and keys: A comprehensive guide to resolving common issues

I'm facing a challenge with generating unique key ID's for my list items. Even though I thought I had a good understanding of how unique keys function, it seems that I am mistaken. In the code snippet below, using key={index} or key={item} is no ...

Utilize jQuery to trigger video playback based on the horizontal movement of the mouse

Utilizing this jQuery script to navigate back and forth in a video as the cursor moves along the x-axis. var mouseX; $(document).mousemove( function moveFunc(e) { mouseX = e.clientX; var timV = $("#deko_vid").get(0).duration; var valV = (timV*mouseX/$(do ...