The functionality of activating a button is not functioning as expected in AngularJS framework

Next to the question I have linked here, I am exploring a different approach.

As a beginner in AngularJS/Cordova/Ionic, my goal is to achieve different outcomes when the "Eingepasst" button is clicked, each with unique logic compared to "Gewonnen" or "Verloren" (see screenshot).

Starting with a simple method, I aim to set the "Eingepasst" button as active while changing the 'adjustedYesNo' variable to 'true'.

This is the code snippet from the HTML file:

<div class="padding">
    <div class="button-bar">
        <button ng-click="round.won=true" ng-class="{'active':round.won == true}" class="button button-outline">Gewonnen</button>
        <button ng-click="round.won=false" ng-class="{'active':round.won == false}" class="button button-outline">Verloren</button>
        <button ng-click="adjusted()" ng-class="{'active':adjusted.adjustedYesNo() == true}" class="button button-outline">Eingepasst</button>
    </div>
</div>

Here is a snippet of the controller.js file:

$scope.adjusted = function (adjustedYesNo)
{
    console.log("adjusted before: ", adjustedYesNo);
    var adjustedYesNo = false;
    console.log("adjusted afterwards: ", adjustedYesNo);
    return adjustedYesNo;
}

And here is the relevant CSS portion:

.button {

  border-radius: 10px;

  &.button-light {
    color: $ci-green;
  }

  &.button-outline {
    @include regular;

    color: $ci-white;
    border-color: $ci-white;

    &.activated {
      background-color: rgba($ci-white, .1);
      border-color: $ci-white;
    }

    &.active {
      border-color: $ci-white;
      background-color: $ci-white;
      color: $ci-green;
    }
  }

What specific changes do I need to make for the value 'adjustedYesNo' to be 'true' when entering the function (currently 'adjustedYesNo' is undefined), and why isn't the "Eingepasst" button changing to white after being clicked?

https://i.sstatic.net/HDcom.png https://i.sstatic.net/vzvZ1.png

Answer №1

There seem to be some issues in the following code snippet:

 <button ng-click="adjusted()" ng-class="{'active':adjusted.adjustedYesNo() == true}" class="button button-outline">Adjusted</button>

When you click on the button, adjusted() function is called without any parameter, which results in adjusteYesNo being undefined initially.

To achieve the desired functionality, make sure to call adjusted.adjustedYesNo(). However, it doesn't appear that this is a defined function. It seems like you intended to access adjusteYesNo, so using a $scope variable would be recommended.

$scope.adjusted = function (adjustedYesNo)
{
    console.log("adjusted before: ", $scope.adjustedYesNo);
    $scope.adjustedYesNo = adjustedYesNo;
    console.log("adjusted afterwards: ", $scope.adjustedYesNo);
    return $scope.adjustedYesNo;
}

By doing so, you can utilize

ng-class="{'active':adjustedYesNo}"
for styling purposes.

Edit:

If you want only one button to be highlighted at a time, consider implementing something like the following (based on your requirements):

 <button ng-click="round.won=true" ng-class="{'active':round.won && !adjustedYesNo}" class="button button-outline">Won</button>
 <button ng-click="round.won=false" ng-class="{'active': !round.won && !adjustedYesNo}" class="button button-outline">Lost</button>
 <button ng-click="adjusted()" ng-class="{'active':adjustedYesNo}" class="button button-outline">Adjusted</button>

Answer №2

 <button ng-click="adjusted()" ng-class="{'active':adjusted.adjustedYesNo() == true}" class="button button-outline">Eingepasst</button>

Revise the line to

 <button ng-click="adjusted()" ng-class="{'active':adjustedYesNo == true}" class="button button-outline">Eingepasst</button>

and update the function in the controller to

$scope.adjusted = function ()
{
   console.log("adjusted before: ", adjustedYesNo);
   $scope.adjustedYesNo = false;
   console.log("adjusted afterwards: ", adjustedYesNo);
}

Answer №3

Give this code a shot.

<button ng-click="adjusted()" ng-class="adjustedYesNo?'active':''" class="button button-outline">Fit</button>

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

How to modify the content type in an Angular.js $http.delete request

When making a $http.delete request in my Angular app, I include a config object using the following approach: return $http.delete('projects/' + projectID + '/activityTypes', {data: [{id: 2}]}) This method attaches the values from my d ...

Step-by-step guide on uploading a multipart file with AngularJS and Spring MVC

Currently, I am attempting to utilize AngularJS and Spring MVC for file uploading. In my application-context.xml file, I have configured a multipartResolver bean as follows: <mvc:annotation-driven /> <bean id="multipartResolver" ...

"Delivering dynamic HTML content using React/Redux variables in the production environment

I am currently in the process of developing a React web application, and I have encountered an issue where a variable intended to store a schedule is being filled with the HTML content of the page when I build and serve the application. Interestingly, the ...

Leveraging a JSON file as a data repository for chart.js

I am struggling to incorporate JSON values into a bar chart. I have successfully logged the JSON data in the console, but I'm unsure how to include it in the data property for the chart. Below is the source JSON... {time: "2016-07-03T21:29:57.987Z" ...

Maximizing Bootstrap's Potential: Achieving Right Alignment for Divs

I am facing a challenge with aligning my div in the layout_cshtml. Currently, it is aligned to the left and the search bar and dropdownlist are not displaying properly. This negatively impacts the user experience. Additionally, my navigation menu is not ...

Including file format extension in the absence of one

I have created a script that loops through every image source on the page, extracting the extension. If the extension is not recognized or does not exist, I automatically add .jpg to the end. Strangely, the if statement always evaluates to true no matter ...

The map function yields identical outcomes for all of the buttons

I need help with mapping an object that contains various note titles: ['note_title_test', 'note_title_test2', 'note_title_test32', 'note_title_test232', 'test title', 'testing1'] Below is the map ...

Using array.map() in React does not display elements side by side within a grid container

I'm currently working with React and material-ui in order to achieve my goal of displaying a grid container that is populated by an array from an external JavaScript file. The challenge I am facing is getting the grid to show 3 items per row, as it is ...

The step-by-step guide to automate clicking on an angular dropdown menu using Selenium

Having some trouble using python selenium to automate report generation on a website. The javascript is making it difficult for me to identify the element I need to click on the page. When inspecting the element in Firefox, there is a DOM Event icon that c ...

Is there a more efficient method for translating arrays between JavaScript and PHP?

Currently, I am in the process of developing a web page that has the capability to read, write, and modify data stored in a MySQL database. My approach involves utilizing PHP with CodeIgniter for handling queries while using JavaScript to dynamically updat ...

Implementing inline styles in the HEAD section of a Next.js website

I currently have a blog hosted on Jekyll at , and I'm looking to migrate it to Next.js. My unique approach involves embedding all the styles directly into the HEAD element of each HTML page, without utilizing any external stylesheet files. However, wh ...

"Troubleshooting: IE compatibility issue with jQuery's .each and .children functions

I have created an Instagram image slider feed that works well in Chrome, Safari, Firefox, and Opera. However, it fails to function in all versions of Internet Explorer without showing any error messages. To accurately determine the height of images for th ...

Obtain picture from firebase utilizing react Js

I have attempted multiple methods to download images from Firebase, but the download URL is not functioning as expected. Instead of downloading the image directly, it opens in a new tab. The function used in Firebase: export async function addMedia(locati ...

Code for creating a multiselect box using jQuery

Looking to create a drop-down menu with multiple checkboxes similar to this example: Are there any other sources that offer something like this? ...

Migrating to Angular Universal for server-side rendering with an external API server

Thank you for taking the time to read my query. I have developed a project using server-side Node.js and client-side Angular 6. The purpose of the app is to provide information on cryptocurrency prices and details. I am now looking to transition my Angu ...

PHP - Implementing a Submit Button and Modal Pop-up AJAX across multiple browsers in PHP

As a newbie in PHP AJAX coding, I'm facing a challenge with having two browsers. My goal is to click the submit button on one browser and have a modal popup on the other browser simultaneously. Essentially creating a chat system where only a button an ...

Ways to bypass browser pop-up blockers when using the window.open function

I am displaying an HTML retrieved from the backend. printHtml(htmlContent) { var windowToPrint = window.open('', '_blank'); windowToPrint.document.write(htmlContent); setTimeout(function () { windowToPrint.document ...

Tips for adjusting the maximum width and content-based width for columns within an HTML/CSS table

I'm working on a simple HTML/CSS code featuring a container with two adjustable slots, controlled by a handler in the middle to modify the space each slot occupies. The first slot contains a table with fixed columns, automatic columns, and limited col ...

Concatenating strings with JavaScript

I am currently working on building a web page using a combination of html and javascript. I have a json file that provides inputs for some specific content I need to display. My main goal is to set up an address variable in order to show the Google Maps AP ...

What is the best way to create direct links to tabs using #anchors in JavaScript?

I am managing a website that includes info-tabs based on a template I found at this link. The tabs contain anchors like example.com/#convey, but unfortunately, direct links to specific tabs using #anchor do not work properly due to the tabs relying on Java ...