具有相同模型的隐藏div中的angularjs ng-show延迟

Question

My code is given below:

<button class="btn-border-blue" ng-show="!hasCouponCode" ng-click="hasCouponCode = true;">Cupom</button>
<div class="form-inline-cupom" ng-show="hasCouponCode">
    <input type="text" ng-model="couponCode" placeholder="Código do cupom">
    <button class="btn-green" ng-click="addCoupon()">Add cupom</button>
</div>

When I click on the button, it changes the model value "hasCouponCode", hides the button and shows the div element, but there is delay and visual is bad.

Is there any way to fix this issue?

Thanks!

Answer 1

I created this snippet and it runs pretty quickly. I think you might have a server callback in the addCoupon() method that's slowing it down. You should improve the performance of the server side code. If you can't, it'd be nice to add a loading screen to the view so the user knows something is working while waiting. I hope it helped.

 (function(angular) { var app = angular.module('myApp', []); var Maincontroller = function($scope) { $scope.addCoupon = function() { $scope.mycoupon = $scope.couponCode; } }; app.controller("maincontroller", ["$scope", Maincontroller]); }(angular)); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="maincontroller"> <button class="btn-border-blue" ng-show="!hasCouponCode" ng-click="hasCouponCode = true;">Cupom</button> <div class="form-inline-cupom" ng-show="hasCouponCode"> <input type="text" ng-model="couponCode" placeholder="Código do cupom"> <button class="btn-green" ng-click="addCoupon()">Add cupom</button> </div> <p>{{mycoupon}}</p> </div> </div> 

Answer 2

The problem can be solved by surrounding your button with an external div, and then using the ng-show in that div. Like this :

<div ng-show="!hasCouponCode">
<button class="btn-border-blue" ng-click="hasCouponCode = true;">Cupom</button>
</div>

Like this, you can apply it to rest of your code too.