Question

我需要在div之间切换。默认情况下，Div class="wrapper"必须可见。管理员批准后必须显示Div class="form"。问题是，当我点击<a ng-click="toggle()">时，它只能运行一次，之后就没有反应。如果我要向“包装器”添加一些ng-hide，ng-click可以正常工作，但只显示/隐藏“形式”。必须在控制器响应后显示<a>，例如class="form"。

HTML：

<div class="body" ng-class="{'show': show && showTemp}">
        <a ng-click="toggle()"></a>
        <div class="form"></div>
        <div class="wrapper"></div>
</div>

CSS：

.form {
    display: none;
}

.wrapper {
    display: block;
}

.show .form {
    display: block;
}

.show .wrapper {
    display: none;
}

控制器：

 $scope.show = false;
 $scope.showTemp = true;


 // response from admin
 $scope.$on('$show', function(e,data) {
                $scope.show = true;
                $scope.available = data;
            });


    // this click by user
    $scope.toggle = function() {
            $scope.showTemp = !$scope.showTemp;
        };

Answer 1

为什么你不能做更简单的事情：

<div class="body" ng-init="showForm = false">
        <a ng-click="showForm = available && ? false : !showForm">Click</a>
        <div class="form" ng-show="showForm"></div>
        <div class="wrapper" ng-hide="showForm"></div>
</div>

使用ngInit我将默认值设置为showForm为false（您可以从控制器那样做（$scope.showForm = false;）然后切换ng-hide类（在angular.css中可以找到任何简单定义为.ng-hide {display: none;}）来显示/隐藏表单和包装器DIV。

当您点击按钮时，评估以下条件：showForm = available && ? false : !showForm - 如果没有可用数据，showForm将始终隐藏，如果有可用数据，它将在形式和包装。

您还可以在按钮上添加ng-show="available"，这样只有在有数据后才会显示，因为它之前什么都不做。一个工作的例子：

＆＃13;

angular.module('app',[]).controller('ctrl', function($scope) {
  $scope.setData = function(data) {
    $scope.available = data;
    $scope.showForm  = true;
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
<div class="body" ng-init="showForm = false">
        <a ng-show="available" ng-click="showForm = !showForm">Click</a>
        <br>
        <div class="form" ng-show="showForm">THIS IS THE FORM<br>{{available | json}}</div>
        <div class="wrapper" ng-hide="showForm">THIS IS THE WRAPPER</div>
  
  <button ng-hide="available" ng-click="setData({val: 'test'})">SET MOCK DATA</button>
</div>
  </div>

＆＃13;

角度ng-click只能工作一次

1 个答案: