Schaltfläche anzeigen/verbergen mit ng-show

Question

Ich habe ein Problem im Zusammenhang mit der Sichtbarkeit einer Schaltfläche. Ich muss eine Schaltfläche ausblenden, wenn kein Text im Formularfeld vorhanden ist, und sie anzeigen, wenn sie ausgefüllt ist. Ich habe einige Code bekam:

<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> 

Und ich schrieb es:

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

Wo liegt das Problem? Um ehrlich zu sein, habe ich noch nie JS und Angular.

Answer 1

Here ist meine Lösung

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

Plunker Siehe für weitere Details.

Ein paar Probleme, die ich in Ihrem ursprünglichen Code erkennen kann:

• wenn controller as Syntax, verwenden Sie 'dieses' Schlüsselwort, nicht $scope in Ihrem Controller
• ng-model="pageUrl" sollte ng-model="ctrl.pageUrl"

Just FYI, isButtonVisible() wird bei jedem Digest-Zyklus ausgewertet werden, so dass keine Beobachter von ng-change benötigen.

Answer 2

versuchen Sie dies. Ich gebe ein einfaches Beispiel.

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>