Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular.js ng-show just doesn't work

I have a problem with Angular's ng-show and I was looking for the answer everywhere and nothing seems to be working. I need form to be showing when button is clicked but it doesn't. Button is calling function that has console.log in it and it works but show is not changing its state, here's code:

<div class="row" ng-controller="MyCtrl">
   <form ng-show="show">
     <input type="text" ng-model="name" placeholder="Name" required>
   </form>
   <a href="#"class="button large" ng-click="showAddForm()">Show Me!</a>
</div>

In app.js:

.controller('MyCtrl', ['$scope',function($scope) {
    $scope.showAddForm = function(){
        console.log("click click");
        $scope.show = true;
    }; 
}]);
like image 280
EDGECRUSHER Avatar asked Mar 04 '26 19:03

EDGECRUSHER


1 Answers

I assume you want the form to be hidden at the beginning and when you click the 'Show Me' button to appear.

If this is the case, your code was 99% there. All you need to do is to initialize $scope.show to false at the start of the controller code.

app.controller('MyCtrl', ['$scope',function($scope) {

    $scope.show = false;

    $scope.showAddForm = function(){
        console.log("click click");
        $scope.show = true;
    }; 
}]);

Refer plunk https://plnkr.co/edit/fwVEkEQzztKgOYkLUOsK?p=preview for a full working version.

Edit : While I was answering your question @Sunil D has already answered with a very good explanation of why its behaving the way its behaving

Hope this helps

like image 108
Chintana Meegamarachchi Avatar answered Mar 06 '26 08:03

Chintana Meegamarachchi



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!