2017-02-10 5 views
0

私はカスタムの角度ドロップダウンの中に一連のトグルを持っています。私が抱えている問題は、トグルはトグルしますが、ドロップダウンも閉じます。どうすればこれを防ぐことができますか?ドロワーをダブルクリックするとドロップダウンが閉じられるはずです。これは予想される動作ですが、トグルがクリックされたときではありません。 アンギュラマテリアルによるng-clickイベントの防止

この

はHTMLです:

<div class="cnt" ng-repeat="item in data"> 
    <div class="menu-item" ng-click="toggle(item.pos);"> 
     <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
      <span class="title flex" flex=""> {{item.name}}</span> 
      <i class="fa fa-chevron-down" ng-class="{'rotate180': item.pos==menuIsOpen, 'rotate-back': !menuIsOpen}"></i> 
     </md-list> 

     <div class="sub-menu" ng-animate="'animate'" > 
      <div ng-repeat='(k,v) in item track by $index'> 
       <div ng-if="isArray(v)"> 
        <md-menu-item ng-if="menuIsOpen===item.pos" ng-repeat='v1 in v track by $index'>       
         <md-button> 
          <div layout="row" flex=""> 
           <md-switch class="md-primary" name="special" ng-model="project.special" required> 

           <span class=""> 
            <p flex="">{{v1.title}}</p> 
           </span> 
           </md-switch> 
          </div> 
         </md-button>  
        </md-menu-item> 
       </div> 
      </div>    
     </div> 
    </div> 
</div> 

と、コントローラは、JSONからの機能の目的とデータ母集団のためにそれでこれを持っています

$scope.toggle = function(itemPos) { 
    if ($scope.menuIsOpen === itemPos) { 
     $scope.menuIsOpen = 0; 
    } 
    else { 
     $scope.menuIsOpen = itemPos; 
    } 
} 
$scope.isArray = function(val) { 
    return Array.isArray(val); 
} 

スポイラー警告:md-buttonしなかったにmd-prevent-menu-close="true"を追加しますヘルプ

01を試してみるの

みんなありがとう

答えて

2

あなたのng-click="toggle(item.pos);"<md-list>

<div class="cnt" ng-repeat="item in data"> 
    <div class="menu-item"> 
     <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex ng-click="toggle(item.pos);"> 
      <span class="title flex" flex=""> {{item.name}}</span> 
      <i class="fa fa-chevron-down" ng-class="{'rotate180': item.pos==menuIsOpen, 'rotate-back': !menuIsOpen}"></i> 
     </md-list> 

     <div class="sub-menu" ng-animate="'animate'" > 
      <div ng-repeat='(k,v) in item track by $index'> 
       <div ng-if="isArray(v)"> 
        <md-menu-item ng-if="menuIsOpen===item.pos" ng-repeat='v1 in v track by $index'>       
         <md-button> 
          <div layout="row" flex=""> 
           <md-switch class="md-primary" name="special" ng-model="project.special" required> 

           <span class=""> 
            <p flex="">{{v1.title}}</p> 
           </span> 
           </md-switch> 
          </div> 
         </md-button>  
        </md-menu-item> 
       </div> 
      </div>    
     </div> 
    </div> 
</div> 
+0

ヘクタールに移動する必要があります!まあ、それは簡単でした!ははは!ありがとうございます。 – LOTUSMS

+1

私たちは皆、このような間違いを犯します。 :) – Berhthun

関連する問題