Calling a function from controller to my view using ng-click

Question

I have this two buttons.

 <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 my controller I have a function that calls a WS, in the console I print a message just to make sure it's working and I'm able to see it, my function is something like this:

$scope.eventDescription = function () {

   some code goes here

    console.log("Service OK")

}

The function code is not relevant so that's why I didnt put the code

The thing is that when I click on the button to swith to that view nothing happens, I can't switch to that view so I dont get what is wrong if Im using ng-click.

Maybe I'm missing something but Im new to angular.

also I think this is relevant, depending on the button selection I call different directives (I render some HTML on them) like this:

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

it must be ng-click="eventDescription()", missing parenthesis — aseferov
– aseferov, Commented May 25, 2016 at 18:44
Actually I have it like that, I just update the question, in my console I got the correcto message but the issue is that I cant switch to the view in the "summary" button. — kennechu
– kennechu, Commented May 25, 2016 at 18:48
Your "Summary" Button has two 'ng-click' attributes. that's not going to work. — Glenn Ferrie
– Glenn Ferrie, Commented May 25, 2016 at 18:52
@ajmajmajma yes, the are, actually I already notice that I have a previos ng-click, ng-click="showData = 2" for chosing the directives so I add a second ng-click but I also think this is wrong. — kennechu
– kennechu, Commented May 25, 2016 at 18:53

aseferov · Accepted Answer · 2016-05-25 18:51:22Z

1

you have 2 ng-click attributes in button tag, try this

 <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>

answered May 25, 2016 at 18:51

aseferov

6,4133 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kennechu Over a year ago

Thanks for your time, I just notice the two ng-click but I didnt know how to call to different functions!! This works perfect. =)

mlhuff12 · Accepted Answer · 2016-05-25 18:57:39Z

1

On ng-click on both buttons, it must call the function eventDescription.

In your original code ... The first button was just changing the value of $scope.showData. The second button had ng-click twice, once doing 'eventDescription' instead of 'eventDescription()', and the other was changing the value of $scope.showData.

If on the button click you want the value of $scope.showData to be changed and to call the function $scope.eventDescription, you should just changet it in the function... You can, however, do this on ng-click as well

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

I'd prefer doing it in the function as it would take up less space in the html.

<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");
}

answered May 25, 2016 at 18:57

mlhuff12

608 bronze badges

1 Comment

kennechu Over a year ago

Thanks for your time, I really appreciate it =)

Shaishab Roy · Accepted Answer · 2016-05-25 19:50:37Z

Some points you can follow:

You should use ng-model for input fields not in others tag so should not use in button tag

Better to initialize in controller $scope.showData = 1;

btn class is common so use in class="btn" no need in condition

so you can try it like:

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 2 for showData
   //some code goes here
    console.log("Service OK")
};

Collectives™ on Stack Overflow

Calling a function from controller to my view using ng-click

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related