單擊按鈕時執行一個函數

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

有三個問題：

1. 您的控制器的範圍僅限於第一個div這是錯誤的。將ng-controller="createController"按照給定的父母div。

2. 變量名（case）在這行$scope.IsVisible = !$scope.IsVisible;中是錯誤的。它應該是$scope.isVisible = !$scope.isVisible;

3. 您在$scope.isVisible變量中使用了字符串值而不是布爾值。只要改變該行：$scope.isVisible = true;（這是一種進步不是問題）

見下文一個工作例如：

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

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

 
});

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

Answer 2

更改了該行$scope.IsVisible = !$scope.IsVisible;，而是寫 $scope.isVisible = !$scope.isVisible;