Changing input values in AngularJS

Recently, I have been working on developing a grocery list application using AngularJS. I have encountered a specific issue that I need help with. Here is the link to the problem on CodePen.

The main problem I am facing is related to the highlighting of Category icons when I select an item from the list of categories. It seems to work one way but not the other direction. I have tried various solutions but have not been able to resolve this issue.

I apologize for not being able to provide a working snippet here. I have posted the code on CodePen because I couldn't find another way to share it. The functional version can be found on CodePen.

javascriptangularjs

Answer №1

I came across a solution by adjusting the model for thumbnails. 

<md-input-container class="md-block" flex-gt-sm layout="row" layout-align="center center" flex-offset="25" >
        <label>Category</label>
        <md-select flex="30" flex-order="1" ng-model="category">
            <md-option ng-click="itemClicked($index)" ng-repeat="category in categoriesObj" value="{{category.name}}">
                {{category.name}}
            </md-option>
        </md-select>
    </md-input-container>

    <md-list flex layout="row">
        <md-list-item ng-click="thumbClicked(thumb.name);itemClicked($index)" ng-repeat="thumb in categoriesObj" ng-model="thumb">
            <img ng-class="{ 'selected': $index == selectedIndex }" class="category" ng-src="{{thumb.img}}">
        </md-list-item>
    </md-list>

Furthermore, I created a new function to ensure the category model is updated correctly. 

        $scope.thumbClicked = function(name){
        $scope.category = name;
    };

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

Utilizing JavaScript and jQuery to make a query to mySQL

Looking to solve a SQL database query challenge using JavaScript or jQuery? Here's the scenario: I have a SQL db and typically use the following query to retrieve data based on distance from specified coordinates: SELECT id, ( 3959 * acos( cos( rad ...

javascriptjquerymysqlarrayssorting

Tips for incorporating material-ui icons into the column component of a data-grid component

I am currently working with the material-ui data-grid and I would like to display Edit icons from material-ui next to each row. Unfortunately, the data-grid does not provide any props specifically for this purpose. Below is the code snippet: import React ...

javascripthtmlreactjsdatagridmaterial-ui

Creating a system to add and limit dynamic fields with a counter in jQuery

Check out this fiddle link http://jsfiddle.net/gKJEs/80/ I'm looking for a way to limit the number of rows that can be added, let's say up to 5. Here is the HTML code: <table id="table"></table> <button id="addRowBtn">Add Ro ...

javascriptjquery

Why does Vue continuously insert undefined values when adding non-consecutive indexes to an array?

In my application, users can select values from a dropdown list and add them to an array by clicking the "add" button. The goal is to use the selected value's id as the index in the array. For example: List of Values 1 - Apple 3 - Bananas 8 - P ...

javascriptvue.jsvuejs2vue-component

What exactly does the question mark represent in the code structure as indicated in VSCode?

When looking at the image, you can see that in the description of done(), VSCode indicates the type of parameters using a colon error: any or sometimes with a question mark and colon user?: any. So, what exactly is the distinction between these two ways o ...

javascriptnode.jstypescriptvisual-studio-code

Passing JSON data dynamically to create a chart with chartjs

I have also developed this project on codesandbox: https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js:2394-3036 I possess JSON data and a Pie graph with labels including car, bikes, motor, and trucks. My goal is to display the total number of users ...

javascriptreactjsjsonchartschart.js

Retrieve dashboard configurations in AngularJS by making an $http request prior to initiating the dashboard controller

I am currently immersing myself in Angular and tackling a complex dashboard framework all built with Angular. Prior to loading the controllers, I need to fetch various dashboard settings from the server using $HTTP. These settings play a crucial role in de ...

javascriptangularjs

Extracting JavaScript OnClick button using Selenium

I'm having trouble extracting the email address from the following URL: https://www.iolproperty.co.za/view-property.jsp?PID=2000026825 that is only visible after clicking on the "Show email address" button. However, every time I attempt to click and r ...

javascriptseleniumweb-scrapingxpath

An AngularJS project utilizing exclusively EJB

Can an AngularJS application be built directly with EJB without needing to expose them as REST services? Many examples on the internet show that eventually REST services are required to provide data to AngularJS. This means that EJB methods must be expos ...

javascriptangularjsrestmodel-view-controllerejb-3.1

Why are my basic style properties not appearing correctly when I use json_encode on an array?

My calendar is written in Javascript within a table with the ID "calendario," allowing me to manipulate it using calendario.rows[i].cells[i]. This calendar lets users make reservations and provides an option to close a day if there are too many reservatio ...

javascriptphpsqljsondom

The function client.guilds.find cannot be located

Hey there! I've been tasked with working on a Discord bot that requires several dependencies to function properly. I've installed the necessary dependencies and attempted to run the bot using 'forever -o out.log bot.js'. However, I enc ...

javascriptnode.jsnpmclient

Tips for managing pagination in a Single Page Application

Within my Single Page Application (built with Javascript and AngularJs), I have an items list that is paginated, displaying 10 items per page. To ensure that the user's current pagination remains intact even when navigating to other pages, I store th ...

javascriptangularjswebpaginationsingle-page-application

Accessing a JSON key using a JavaScript variable

Is there a way to dynamically replace the key "Argentina" in a JSON object with a javascript variable string? jQuery(document).ready(function() { $.getJSON('countries.json', function(data) { var output= data.Argentina[0].countryPho ...

javascriptjson

The website must automatically adjust the size of all elements on the page, including images and fonts

I am currently facing an issue with the resizing of my web page when the user changes the window size or has a different screen resolution. I have created a jQuery function that triggers on resize or page load, which helps in scaling everything proportiona ...

javascriptjqueryhtmlcsscss-transitions

What purpose do controller.$viewValue and controller.$modelValue serve in the Angular framework?

I'm confused about the connection between scope.ngModel and controller.$viewValue/controller.$modelValue/controller.$setViewValue(). I'm specifically unsure of the purpose of the latter three. Take a look at this jsfiddle: <input type="text" ...

javascriptangularjsangularjs-directiveangular-ngmodel

Guide on obtaining an access token for an API through the use of the POST method in JavaScript

I am trying to obtain credentials for an API that uses OAuth2. The API documentation outlines the process as follows: Request access token: POST: auth/access_token Url Parms: grant_type : "client_credentials" client_id : Client id clien ...

javascriptjsonoauth-2.0

Modify an individual attribute in a local JSON file using a put request in Angular 8

I am looking to make updates to my JSON file located in the assets folder. Specifically, if I want to update just one property of my JSON object, I would like it to only affect that particular property without impacting any others: For example, in the sam ...

javascriptangulartypescriptangular-httpclient

I am looking to create a PHP script that restricts access to individuals under the age of 18 based on the current

I'm looking for a way to use Php, javascript, or ajax to restrict access for individuals under 18 years old based on the current date. Any suggestions on how I can achieve this? Could someone please review my code for calculating age onblur or onSubm ...

javascriptphpajax

Is there a Joomla extension available that can display or conceal content upon clicking?

Looking to enhance my Joomla site by installing a plugin that allows me to toggle the visibility of content with a click, similar to how FAQ sections work on many websites. Question 1 (click here for the answer) { Details for question 1 go here } Questi ...

phpjavascripthtmlcssjoomla

What is the process of making a div element in AngularJs?

Is there a way to dynamically create a div element in AngularJS? For instance: <table ng-controller="tableController"> <tr ng-repeat="totaldivs in parameters"> <td ng-repeat="divId in totaldivs"> <!-- looking to replace ...

htmlangularjs