AngularJS上下文菜單僅顯示最接近的下一個div

如何在我的點擊功能上顯示與上下文菜單相關的div？如何找到最接近的下一個div類，並使點擊按鈕事件可見，而不是顯示所有div具有相同的類。AngularJS上下文菜單僅顯示最接近的下一個div

請注意我下面的HTML和JS也是小提琴鏈接以供參考： http://jsfiddle.net/4WK7R/274/

HTML：

 <div ng-app> 
      <div ng-controller="MyCtrl"> 
       <div class="row"> 
        <button id="mybutton" ng-click="showAlert()">Click me</button> 
        <div ng-show="myvalue" class="ng-cloak">11111111</div> 
       </div> 
       <div class="row"> 
        <button id="mybutton" ng-click="showAlert()">Click me</button> 
        <div ng-show="myvalue" class="ng-cloak">22222222</div> 
       </div> 
       <div class="row"> 
        <button id="mybutton" ng-click="showAlert()">Click me</button> 
        <div ng-show="myvalue" class="ng-cloak">333333333</div> 
       </div> 

      </div> 
     </div>

JS：

function MyCtrl($scope) { 

     $scope.myvalue = false; 

     $scope.showAlert = function(){ 
      $scope.myvalue = true; 
     }; 

    }

來源

2015-12-16 Krish

這就是你想我想：

個

<div ng-app> 
<div ng-controller="MyCtrl"> 
    <div class="row"> 
     <button id="mybutton" ng-click="showAlert('div1')">Click me</button> 
     <div ng-show="div1" class="ng-cloak">11111111</div> 
    </div> 
    <div class="row"> 
     <button id="mybutton" ng-click="showAlert('div2')">Click me</button> 
     <div ng-show="div2" class="ng-cloak">22222222</div> 
    </div> 
    <div class="row"> 
     <button id="mybutton" ng-click="showAlert('div3')">Click me</button> 
     <div ng-show="div3" class="ng-cloak">333333333</div> 
    </div> 

</div>

function MyCtrl($scope) { 
    $scope.showAlert = function(show){ 
    //edited 
    $scope[show] ? $scope[show] = false: $scope[show]= true; 
    //$scope[show] = true; 
    }; 
}

來源

2015-12-16 05:06:04 Maher

@Meher：感謝究竟它做工精細。還有一個問題，除此之外，點擊除了按鈕之外的任何一個身體，我還想隱藏「ng-cloak」類的任何想法？ http://jsfiddle.net/4WK7R/279/ – Krish

也只有一個上下文菜單應該打開所有的時間，現在如果我保持打開一個菜單，並點擊其他「點擊我」兩個菜單顯示正確嗎？而是我想關閉所有其他，只有最近點擊菜單「ng-clok」需要打開 - 請爲此建議？ – Krish

我想你想要像標籤somthing ..結帳這個答案 – Maher

標籤：

function MyCtrl($scope) { 
 
    $scope.tabs = [{ 
 
    title: "tab1", 
 
    show: true 
 
    }, { 
 
    title: "tab2", 
 
    show: false 
 
    }, { 
 
    title: "tab3", 
 
    show: false 
 
    }, ] 
 
    $scope.tabAction = function(tab) { 
 
    angular.forEach($scope.tabs, function(tab) { 
 
     tab.show = false; 
 
    }); 
 
    tab.show ? tab.show = false : tab.show = true; 
 
    } 
 
};

<div ng-app> 
 
    <div ng-controller="MyCtrl"> 
 
    <div ng-repeat="tab in tabs"> 
 
     <div ng-show="tab.show">{{tab.title}}</div> 
 
     <button ng-hide="tab.show" ng-click="tabAction(tab)"> 
 
     open {{tab.title}} 
 
     </button> 
 
     <hr> 
 
    </div> 
 

 
    </div>

來源

2015-12-16 07:01:24 Maher

AngularJS上下文菜單僅顯示最接近的下一個div

回答

相關問題