Following Angular Code does not work in SharePoint 2013 - On my local Machine it runs perfectly:

<div ng-init="value = 'off'">
<button ng-click="value = { 'on': 'off', 'off':'on'}[value]">On/Off</button>    
{{ value }}
<h1 ng-show="value == 'on'" >Foobar1</h1>
<h1 ng-show="value == 'off'" >Foobar2</h1>  

When I click on the Button in SharePoint it shows me shortly 'foobar1', but after a second it change automatically back to 'foobar2'.

Can anybody help me on that ?


FYI, toggles are much easier with Booleans

<div ng-init="value = true" ng-click="value = !value">On/Off</div>    
<h1 ng-show="value" >Foobar1</h1>
<h1 ng-show="!value" >Foobar2</h1>  

Thanks for the Input Danny.

Found the problem - There is probably a click event on the button from SharePoint self. When you change the button to a div or span etc. then it works also in SharePoint - Here is my Code, which is working:

<div ng-init="value = 'off'">
<div ng-click="value = { 'on': 'off', 'off':'on'}[value]">On/Off</div>    
{{ value }}
<h1 ng-show="value == 'on'" >Foobar1</h1>
<h1 ng-show="value == 'off'" >Foobar2</h1>  

  • Change the button to input type="button" – Mohamed Derhalli Dec 17 '15 at 11:29
  • Change your ng-click to execute a function and use event.PreventDefault to stop the event bubble... stackoverflow.com/questions/5963669/… – Danny '365CSI' Engelman Dec 17 '15 at 11:48
  • There is no event on the button you add yourself, the button click will be sent to all its parent elements, so you have to cancel that bubbling – Danny '365CSI' Engelman Dec 17 '15 at 12:48
  • you mean in this way: "<button ng-click="value = { 'on': 'off', 'off':'on'}[value]; event.PreventDefault;">On/Off</button> ", right ? – SaSH_17 Dec 17 '15 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.