Angular.js ng-show只是不起作用

Question

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;
    }; 
}]);

Answer 1

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

Answer 2

Remember you can use a Stackoverflow code snippet in your questions & answers. Your code works if you add the "app" part in html & js:

 angular .module("app",[]) .controller('MyCtrl', ['$scope',function($scope) { $scope.showAddForm = function(){ console.log("click click"); $scope.show = !$scope.show; }; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" 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/Hide</a> </div>