Блог

Главная - Вопросы по программированию - как скрыть кнопку на основе ng-show n ng-hide?

как скрыть кнопку на основе ng-show n ng-hide?

#javascript #angularjs

#javascript #angularjs

Вопрос:

 <div>
   <div class="pull-right">
      <button type="button" data-ng-click="editFigure()" id="Edit">Edit
      </button>
      <button type="button" data-ng-click="figurePreview()" id="Preview">Preview
      </button>
   </div>
   <div class="pull-right">
      <button type="button" data-ng-click="editTable()" id="Edit1">Edit
      </button>
      <button type="button" data-ng-click="tablePreview()" id=Preview">Preview
      </button>
   </div>
</div>

Я хочу показать таблицу div , используя a ng-show , и в то же время рисунок div должен быть отключен. можете мне помочь с этим????

Ответ №1:

Попробуйте это:

В html,

 <div ng-show="ShowDiv">
   This div shows if ShowDiv is true and hides if ShowDiv is false
</div>
<div ng-hide="ShowDiv">
   This div hides if ShowDiv is true and shows if ShowDiv is false
</div>

В контроллере,

 $scope.ShowDiv = false;

$scope.someFunc = function(){
   $scope.ShowDiv = true;
}

Ответ №2:

 <body ng-app="myapp">
    <div ng-controller="mycontroller">
        <div class="pull-right">
            <button type="button" data-ng-click="editFigure()" id="Edit">Edit
            </button>
            <button type="button" data-ng-click="figurePreview()" id="Preview">Preview
            </button>
        </div>
        <div class="pull-right">
            <button type="button" data-ng-click="editTable()" id="Edit1">Edit
            </button>
            <button type="button" data-ng-click="tablePreview()" id="Preview">Preview
            </button>
        </div>
    </div>
    <div id="figure" ng-show="showFigure">I am a Figure</div>
    <div id="table" ng-show="showTable">I am a Table</div>
</body>

На контроллере:

 angular.module('myapp', [])
  .controller('mycontroller', function($scope){
    // default show Figure, you can change it
    $scope.showFigure = true;
    $scope.showTable= false;

    $scope.editFigure = function(){ 
        $scope.showFigure = true;
        $scope.showTable= false;
    };
    $scope.figurePreview= function(){ 
        $scope.showFigure = true;
        $scope.showTable= false;
    };
    $scope.editTable= function(){ 
        $scope.showFigure = false;
        $scope.showTable= true;
    };
    $scope.editTable = function(){ 
        $scope.showFigure = false;
        $scope.showTable= true;
    };
});

Попробуйте это. Должно сработать, они улучшат код, когда вы лучше поймете концепцию.

Отредактировано, чтобы дать полный пример кода.