使用ng-show显示/隐藏按钮

Question

I've got a problem related to the visibility of a button. I have to hide a button when there is no text in the form field, and show it back when it's filled. I've got some code:

    <div class="TextAreaCont">
        <input ng-model="pageUrl" placeholder="Facebook Page URL" type="text">
    </div>
    <div class="ButtonCont" ng-show="ctrl.isButtonVisible()">
        <button ng-click="ctrl.send()">Fetch data</button>
    </div>

And I wrote it:

Facebook.controller('PageCtrl', ['$scope', function($scope){
$scope.isButtonVisible = function(){
    if($scope.pageUrl){return true}else{return false}
};

Where is the problem? To be honest, I've never leart JS and Angular.

Answer 1

try this. i put simple example.

 var app = angular.module('app', []); app.controller('TestController', function ($scope) { $scope.display = false; $scope.isButtonVisible = function(pageUrl){ if(pageUrl){ $scope.display = true; } else{$scope.display = false;} }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="TestController"> <input ng-model="pageUrl" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)"> <div class="ButtonCont" ng-show="display"> <button ng-click="send()">Fetch data</button> </div> <input ng-model="pageUrl2" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)"> <div class="ButtonCont" ng-show="pageUrl2"> <button ng-click="send()">Fetch data</button> </div> </div> 

Answer 2

Here is my solution

var Facebook = angular.module('Facebook', []);

Facebook.controller('PageCtrl', [function(){

  var ctrl = this;

  ctrl.isButtonVisible = function(){
    if(ctrl.pageUrl){
      return true;
    }else{
      return false;
    }
  };

  ctrl.send = function(){
    console.log('Page URL: ' + ctrl.pageUrl)
  };
}]);

See Plunker for more details.

Few problems that I can spot in your original code:

• when using controller as syntax, use 'this' keyword, not $scope inside your controller
• ng-model="pageUrl" should be ng-model="ctrl.pageUrl"

Just FYI, isButtonVisible() will be evaluated on every digest cycle, so there no need for watchers of ng-change .