Question

目前，我在网页上使用了laravel和AngularJS。我想执行一个功能，可以在单击按钮时显示和隐藏表单。在我编写该代码后，表单已成功显示，但无法隐藏。

我在master.blade.php页面上写了功能代码：

var masterCtrl = angular.module('olshopApp', ['ngRoute']);

        masterCtrl.controller('createController', function($scope){
            $scope.isVisible = 'true';
            $scope.ShowHide = function(){
                $scope.IsVisible  = !$scope.IsVisible;
            };

        });

以及product.blade.php页面上的代码

<div class="form-actions" ng-controller="createController">
        <button class="btn btn-primary icon-pencil bigger-110" type="button" ng-click="ShowHide()">
            Add New
        </button>
    </div>

    <div create-product ng-hide="isVisible"></div>

Answer 1

有三个问题：

您的控制器的范围仅限于第一个错误的div。将ng-controller="createController"置于父div给定。
此行$scope.IsVisible = !$scope.IsVisible;中的变量名称（大小写）错误。它应该是$scope.isVisible = !$scope.isVisible;
您在$scope.isVisible变量中使用了String值而不是Boolean值。只需将该行更改为：$scope.isVisible = true;（这是改进而不是问题）

请参阅下面的工作示例：

＆＃13;

var masterCtrl = angular.module('olshopApp', []);

masterCtrl.controller('createController', function($scope) {
  $scope.isVisible = true;
  
  $scope.ShowHide = function() {
    console.log($scope.isVisible)
    $scope.isVisible = !$scope.isVisible;
  };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="olshopApp" ng-controller="createController">
  <div class="form-actions">
    <button class="btn btn-primary icon-pencil bigger-110" type="button" ng-click="ShowHide()">
      Add New
    </button>
  </div>

  <div create-product ng-hide="isVisible">Hello. Create Product form will be displayed here. I'll be shown or hidden on button click.</div>
</div>

＆＃13;

Answer 2

更改该行$scope.IsVisible = !$scope.IsVisible;而改写 $scope.isVisible = !$scope.isVisible;

单击按钮时执行功能

2 个答案: