スクリプトコーディングをangularJSコーディングに変換する方法

-7

これは、左側のメニュースライドを左右にコーディングするスクリプトです。私はangularJSに変換したい、私は他のウェブサイトからそれをコピーし、理解することができません。スクリプトコーディングをangularJSコーディングに変換する方法

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

出典

2017-09-05 Sahdev Kumar Rana

このコードは、ある種のトグル機能です。ですから私がこれをどのように変換できるか説明しようとしましょう！

コードも角度にあなたは上記の行でそう

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

のようなHTMLでこれを書くことができ、私はfalseにテスト変数を初期化します、ng-clickになる角度でので、onclickから始まります。 ng-clickはこの変数を切り替えます。次に、ボタンのアクティブなクラスを切り替えます。そのための等価角はng-classになります。ここでは、検査がブール値になります。testがtrueの場合、クラスが追加されます。私はまた、障害のある授業でも同じことをしています。

同様に、他のクラスを他の要素に追加します。

ボディHTML：

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

本部IDを持つ - CBP-spmenu-S1：

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

出発点としてこれを使用し、あなたの角度のアプリケーションを構築し続けてください。

参考用にデモを用意しました。

JSFiddle Demo

出典

2017-09-05 18:19:13

スクリプトコーディングをangularJSコーディングに変換する方法

答えて

関連する問題