Как скрыть div2 при нажатии кнопки 1 и показать угол div1

Question

Я хочу, чтобы при нажатии на кнопку Редактировать показывалось <div ng-if="hideShow">, а при нажатии на кнопку Добавить , чтобы скрыть <div ng-if="hideShow1"> и отобразить <div ng-if="hideShow1">

Сейчаскогда я нажимаю кнопку Edit , отображается «hideShow», а после этого при нажатии кнопки Add отображается «hideShow1» и не скрывается «hideShow1».

Я использую угловой.Как вы можете мне помочь?

У меня есть этот код:

<button ng-click="hideShow2=(hideShow2 ? false : true)" value="myValue" 
        id="mybtn" onclick="change()">
  See users
</button>
<button ng-click="hideShow=(hideShow ? false : true)" id="editbtn">Edit</button>
<button ng-click="hideShow1=(hideShow1 ? false : true)" id="addbtn">Add</button>

<div ng-if="hideShow">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="database_address">Потребителско име</label>
                <input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
            </div>

            <div class="form-group">
                <label for="password">Парола*</label>
                <input type="text" class="form-control" id="password" ng-model="activeItem.passwordString"  />
            </div>
            <div class="form-group">
                <label for="password">Потвърждаване на парола*</label>
                <input type="text" class="form-control" id="password" ng-model="activeItem.passwordConfirm"  />
            </div>
              <p ng-show="(activeItem.passwordString != activeItem.passwordConfirm)" style="color:red">Паролите не съвпадата</p>

        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="username">Оператор</label>
                <input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
            </div>
        </div>
    </div>
    <button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Запиши</button>
    <!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>

<!----------------------------FORM FOR ADD USER---------------------------->
<div ng-if="hideShow1">
<div class="form">
<form ng-submit="createUser(userForm1.$valid)" name="userForm1">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="database_address">Потребител</label>
                <input type="text" class="form-control" ng-model="usernamee" placeholder="Потребителско Име..." />
            </div>

            <div class="form-group">
                <label for="password">Парола</label>
                <input type="text" class="form-control" ng-model="passwordd" required id="password"   />
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="username">Оператор</label>
                <input type="text" class="form-control" ng-model="namee" required id="username"  />
            </div>
        </div>
    </div>
    <button class="btn btn-primary"  type="submit">Запиши</button> <!--ng-click="createUser()"-->
    <!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div> 

Answer 1

Вместо встроенного javascript переместите свой код в режим работы и установите видимость в соответствии с условием

<button ng-click="VisibilityChange('1')" value="myValue" 
        id="mybtn">
  See users
</button>
<button ng-click="VisibilityChange('2')" id="editbtn">Edit</button>
<button ng-click="VisibilityChange('3')" id="addbtn">Add</button>`

Ваш контроллер

  var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.hideShow2 = true;
        $scope.hideShow = false;
        $scope.hideShow1 = false;


    $scope.VisibilityChange= function(type){

      switch(type)
      {
      case"1":
        $scope.hideShow2 = true;
        $scope.hideShow = false;
        $scope.hideShow1 = false;
        change();
      break;
      case"2":
        $scope.hideShow2 = false;
        $scope.hideShow = true;
        $scope.hideShow1 = false;
      break;

      case"3":
        $scope.hideShow2 = false;
        $scope.hideShow = false;
        $scope.hideShow1 = true;
      break;

      }

    }

    });