3

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 ?

1

2 Answers 2

2

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

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>  

4
  • Change the button to input type="button" Commented Dec 17, 2015 at 11:29
  • Change your ng-click to execute a function and use event.PreventDefault to stop the event bubble... stackoverflow.com/questions/5963669/… Commented Dec 17, 2015 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 Commented Dec 17, 2015 at 12:48
  • you mean in this way: "<button ng-click="value = { 'on': 'off', 'off':'on'}[value]; event.PreventDefault;">On/Off</button> ", right ? Commented Dec 17, 2015 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.