由控制器控制Angular ng顯示

Question

如何使用ng-show顯示元素，我可以使用布爾值控制我的控制器？ （除了這個按鈕，控制器中的所有東西都能正常工作）

這是我的模態html。

<div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal"> 
    <div class="modal-container modal-confirm-pickup-container"> 
     <div class="modal-container-content"> 
     <div class="modal-container-content-header"> 
      <strong> 
      Login 
      </strong> 
     </div> 
     <div class="modal-container-content-body"> 
      aaaaaaaeoa 
     </div> 
     </div> 
    </div> 
    </div> 

這是我在控制器

​​

這是我的按鈕的HTML代碼。

<table id="front-table" class="table table-bordered" ng-show="!vendorPageToggle"> 
     <thead> 
      <tr class="table-head-text-center"> 
      <th></th> 
      <th>Order</th> 
      <th>&#3647; Total</th> 
      <th>Address</th> 
      <th>Comment</th> 
      <th>Status</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="order in orders"> 
      <th class="text-center"> 
       <span class="table-order-number"> 
       <strong>{{ order.id }}</strong> 
       </span> 
       <br> 
       <span>{{ order.customer.name }}</span> 
       <br> 
       <br> 
       <span>{{ order.estimated_pickup }}</span> 
      </th> 
      <td> 
       <span ng-repeat="product in order.products"> 
       1 X {{ product.name }} <br> 
       <span ng-repeat="extra in product.extras"> 
        <span ng-repeat="item in extra.items"> 
        -- ext {{ item }} 
        <br> 
        </span> 
       </span> 

       <br> 
       </span> 
      </td> 
      <td>{{ getTotal(order) }}</td> 
      <td> 
       {{ order.customer.address.address1 }} 
       <br> 
       {{ order.customer.address.address2 }} 
       <br> 
       {{ order.customer.address.suburb }} 
       <br> 
       {{ order.customer.address.city }} 
       <br> 
       <br> 
       <strong> 
       <i class="icon ion-iphone" style="font-size: 24px;"></i> {{ order.customer.phone }} 
       </strong> 
      </td> 
      <td>aaaa</td> 
      <td class="text-center"> 
       <button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal"> 
       button-balanced 
       </button> 
      </td> 
      </tr> 
     </tbody> 
     </table> 

我的CSS

.modal-box { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1050; 
    /*display: none;*/ 
    overflow: hidden; 
    -webkit-overflow-scrolling: touch; 
    outline: 0; 
    background-color: rgba(0, 0, 0, 0.5); 
} 

.modal-container { 
    position: relative; 
    width: auto; 
    margin: 10px; 
} 

.modal-container-content { 
    position: relative; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #999; 
    border: 1px solid rgba(0,0,0,.2); 
    border-radius: 20px; 
    outline: 0; 
    overflow: hidden; 
} 

.modal-container-content-header { 
    background-color: #FF0000; 
    color: #fff; 
    text-align: center; 
    font-size: 32px; 
    height: 80px; 
    padding-top: 28px; 
} 
.modal-container-content-body { 
    padding: 15px; 
    background-color: #EEEEEE; 
} 

但是當我點擊我的按鈕沒有動靜，我還是模式不會出現相同的開始。

我該如何解決這個問題。 謝謝！

Answer 1

這裏正在按照預期的代碼：JS Fiddle

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
<script> 
var app = angular.module('app', []); 

app.controller('ctrl', function ($scope) { 
    $scope.hello = 'Ohh, hello there!'; 
    $scope.showPickupModal = false; 
}); 
</script> 

<div ng-app='app' ng-controller='ctrl'> 

    <button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal"> 
    button-balanced 
    </button> 


    <div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal"> 
    <div class="modal-container modal-confirm-pickup-container"> 
     <div class="modal-container-content"> 
      <div class="modal-container-content-header"> <strong> 
      Login 
      </strong> 

      </div> 
      <div class="modal-container-content-body">{{hello}}</div> 
     </div> 
    </div> 
    </div> 

</div> 

如果不解決您的問題，發佈更多的代碼，所以我們可以看到什麼是錯的，你的控制器工作不正常。

編輯與新的全碼

Working Plunker

好吧，我不知道爲什麼你的代碼不能正常工作。但是，爲了測試一下，我喜歡在視圖上不做任何事情。所以，我已經刪除了你的HTML代碼，並通過函數進行交換。就像這樣：

ng-click='showPickupModal = !showPickupModal' 

這是由該刪除：

ng-click='togglePickupModal()' 

，並在控制器上，我已經添加了這個功能，任何的console.log測試之前，它只是工作。

$scope.togglePickupModal = function() { 
    $scope.showPickupModal = !$scope.showPickupModal; 
}; 

您還沒有表現出你的「.close模態盒-BT」的代碼，所以我用的切換功能關閉模式了。問題解決了。