由控制器控制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”的代码，所以我用的切换功能关闭模式了。问题解决了。