How can convert script coding into angularJS coding

Question

this is my script coding for left side menu slide left and right. I want to convert it into angularJS, I copied it from other website and unable to understand.

<script>
    var menuLeft = document.getElementById('cbp-spmenu-s1'), 
        showLeftPush = document.getElementById('showLeftPush'),
        body = document.body;

    showLeftPush.onclick = function() {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toright');
        classie.toggle(menuLeft, 'cbp-spmenu-open');
        disableOther('showLeftPush');
    };

    function disableOther(button) {
        if (button !== 'showLeftPush') {
            classie.toggle(showLeftPush, 'disabled');
        }
    }
</script>

Naren Murali · Accepted Answer · 2017-09-05 18:19:13Z

I can see that this code is some sort of toggle functionality. So let me try to explain how we can convert this!

The code starts at the onclick, so in angular that will be ng-click, also in angular you can write this in the HTML like so

<button id="showLeftPush" ng-click="test=!test;" ng-init="test=false;" ng-class="{'active': test, 'disabled': test}"></button>

In the above line, I will initialize test variable to false. then ng-click will toggle this variable. Then you are toggling the active class for the button. So the angular equivalent for that will be ng-class where the test will be a boolean, if test is true, then the class will be added. I do the same thing for disabled class also.

Similarly I add the other classes to the other element like.

Body HTML:

<body ng-class="{'cbp-spmenu-push-toright': test}" ng-controller='MyController' ng-app="myApp">

Div with ID - cbp-spmenu-s1:

<div id="cbp-spmenu-s1" ng-class="{'cbp-spmenu-open': test}">left</div>

Please use this as a starting point and continue building you angular App.

I have included a demo for your reference.

JSFiddle Demo

Collectives™ on Stack Overflow

How can convert script coding into angularJS coding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related