如何在单击button1时隐藏div2并显示div1角度 [英] How to Hide div2 when button1 is clicked and show div1 angular

问题描述

我想要在单击按钮编辑时显示< div ng-if ="hideShow"> 并在单击按钮添加隐藏< div ng-if ="hideShow1"> 并显示< div ng-if ="hideShow1">

I want when clicking on button Edit to show <div ng-if="hideShow"> and when click on button Add to hide <div ng-if="hideShow1"> and display <div ng-if="hideShow1">

现在，当我单击ot按钮 Edit 时，它将显示"hideShow"，此后，当单击按钮 Add 时，它将显示"hideShow1"，而不会隐藏"hideShow1"

Now when i click ot button Edit it displays "hideShow" and after this when click on button Add it display "hideShow1" and doesn't hide "hideShow1".

我正在使用角度.您可以如何帮助我?

I'm using angular. How you can help me?

我有此代码:

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

推荐答案

将代码移到函数中并根据条件设置可见性，而不是使用内联JavaScript.

Instead of inline javascript, move your code to function and set visibility according to condition

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

      }

    }

    });

这篇关于如何在单击button1时隐藏div2并显示div1角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！