Achieving function calling from controller to view with ng-click

Question

Achieving function calling from controller to view with ng-click

I'm facing an issue with two buttons on my page.

 <div class="btn-group" ng-init="showData = 1">
     <button ng-model="showData" type="button" ng-class='{"btn btn-primary": showData == 1, "btn btn-white": showData != 1}' ng-click="showData = 1">Headline</button>
     <button ng-click="eventDescription()" ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}'  ng-click="showData = 2">Summary</button>
 </div>

In the controller, I have a function that triggers a web service call. The function outputs a message to the console for verification purposes. Here is a simplified version of the function:

$scope.eventDescription = function () {

   // Some code here

    console.log("Service OK")

}

The specific code within the function is omitted due to its irrelevance

Despite using ng-click in my AngularJS setup, clicking the button does not switch to the intended view. As a novice in Angular development, I am unsure of what might be causing this issue.

Additionally, depending on which button is selected, I display different directives (which render HTML content) like so:

  <head-line-view ng-show="showData == 1"></head-line-view>
  <summary-view ng-show="showData == 2"></summary-view>

javascript angularjs

Answer 1

Answer №1

There are two ng-click attributes within the button tag - here is a suggestion to fix it:

<button ng-click="eventDescription();showData = 2" ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}'>Summary</button>

Answer 2

There are two ng-click attributes within the button tag - here is a suggestion to fix it:

<button ng-click="eventDescription();showData = 2" ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}'>Summary</button>

Answer 3

Answer №2

Whenever either of the buttons is clicked, the function eventDescription should be triggered.

In the initial code snippet ... The first button simply altered the value of $scope.showData. The second button had two ng-click events; one calling 'eventDescription' without parentheses and the other changing $scope.showData.

If you wish for the button click to both change $scope.showData and call the function $scope.eventDescription, you can combine them within the function block... Alternatively, this can also be achieved through ng-click

ng-click="showData = 1 && eventDescription()"

I personally recommend handling this within the function as it keeps the HTML less cluttered.

<div class="btn-group">
 <button ng-click="eventDescription(1)">Headline</button>
 <button ng-click="eventDescription(2)" >Summary</button>
</div>

$scope.eventDescription = function (viewNumber) {
    $scope.showData = viewNumber;
    console.log("Button Clicked");
}

Answer 4

Whenever either of the buttons is clicked, the function eventDescription should be triggered.

In the initial code snippet ... The first button simply altered the value of $scope.showData. The second button had two ng-click events; one calling 'eventDescription' without parentheses and the other changing $scope.showData.

If you wish for the button click to both change $scope.showData and call the function $scope.eventDescription, you can combine them within the function block... Alternatively, this can also be achieved through ng-click

ng-click="showData = 1 && eventDescription()"

I personally recommend handling this within the function as it keeps the HTML less cluttered.

<div class="btn-group">
 <button ng-click="eventDescription(1)">Headline</button>
 <button ng-click="eventDescription(2)" >Summary</button>
</div>

$scope.eventDescription = function (viewNumber) {
    $scope.showData = viewNumber;
    console.log("Button Clicked");
}

Answer 5

Answer №3

Here are some key points to keep in mind:

Make sure to use ng-model for input fields and avoid using it in other tags such as button.

It's a good practice to initialize variables in the controller like $scope.showData = 1;

Since the btn class is common, simply use it as class="btn" without the need for any conditions.

You can implement it like this:

HTML:

<div class="btn-group">
     <button type="button" class="btn" ng-class="showData===1? 'btn-primary' : 'btn-white' " ng-click="showData = 1">Headline</button>
     <button type="button" class="btn" ng-class="showData===2? 'btn-primary' : 'btn-white' " ng-click="eventDescription()" >Summary</button>
 </div>

Controller:

$scope.showData = 1; // Initialize 

$scope.eventDescription = function () {
   $scope.showData = 2; // Set showData to 2
   // Add your code here
    console.log("Service OK")
};

Answer 6

Here are some key points to keep in mind:

Make sure to use ng-model for input fields and avoid using it in other tags such as button.

It's a good practice to initialize variables in the controller like $scope.showData = 1;

Since the btn class is common, simply use it as class="btn" without the need for any conditions.

You can implement it like this:

HTML:

<div class="btn-group">
     <button type="button" class="btn" ng-class="showData===1? 'btn-primary' : 'btn-white' " ng-click="showData = 1">Headline</button>
     <button type="button" class="btn" ng-class="showData===2? 'btn-primary' : 'btn-white' " ng-click="eventDescription()" >Summary</button>
 </div>

Controller:

$scope.showData = 1; // Initialize 

$scope.eventDescription = function () {
   $scope.showData = 2; // Set showData to 2
   // Add your code here
    console.log("Service OK")
};

Achieving function calling from controller to view with ng-click

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the impact of JavaScript tags on website performance in accordance with W3

Enhancing MongoDB within a MEAN (MongoDB, Express,

Alter label text using jQuery with the selections made in two dropdown lists

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

Retrieve the decimal separator and other locale details from the $locale service

Encountering issues when implementing Parse.Cloud.httpRequest within Express - reporting a lack of success method available

Using Jquery Ajax on a website with an insecure SSL certificate

Effortless Page Navigation - Initial click may lead to incorrect scrolling position, but the subsequent link functions perfectly

The function getAttribute for isPermaLink is returning a null value when accessing an element within an RSS feed using

Having trouble grasping the problem with the connection

"Strategies for Launching Localhost APIs in a Live Production Environment

A guide on utilizing the img src attribute from vuex through a loop

Leveraging jQuery plugin within a React ecosystem

Using PHP to fill input field with text output

Attempting to create a TypeScript + React component that can accept multiple types of props, but running into the issue where only the common prop is accessible

Display or conceal rendering in Rails upon clicking a button

Triggering an event in Angular 2 after ngFor loop completes

Looking to have my textarea display its readonly text with HTML formatting

Converting a PHP variable to JSON in an AJAX call

Guide to sending a HTTP POST request with parameters in typescript