ボタンをクリックしたときに関数を実行

Question

現在、私は自分のWebページで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

3つの問題があります。

1. コントローラのスコープは、最初のdivに間違っています。与えられた通りを親のdivに入れてください。

2. この行の変数名（case）は間違っています$scope.IsVisible = !$scope.IsVisible;。 $scope.isVisible = !$scope.isVisible;

3. $scope.isVisible変数にブール値の代わりに文字列値を使用しました。ちょうどにその行を変更：

   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>

   ：

（これは改善ではない問題です）$scope.isVisible = true;を以下の実施例を参照してください。

Answer 2

$scope.IsVisible = !$scope.IsVisible;に並ぶ、代わりに を書くの変更$scope.isVisible = !$scope.isVisible;