Question

如何在点击功能上显示与div相关的上下文菜单？如何查找最接近的下一个div类，并在点击按钮事件时显示，而不是显示具有相同类的所有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;  
        };

    }

Answer 1

这就是你想要的：

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

Answer 2

标签：

＆＃13;

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

＆＃13;

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

＆＃13;

AngularJS上下文菜单仅显示最接近的下一个div

2 个答案: