使用ng-show顯示/隱藏按鈕

Question

我有一個與按鈕的可見性有關的問題。 當表單字段中沒有文本時，我必須隱藏一個按鈕，並在填充時將其顯示回來。 我有一些代碼：

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

我寫了：

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

問題出在哪兒？ 老實說，我從未學習過JS和Angular。

Answer 1

嘗試這個。 我舉一個簡單的例子。

 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

這是我的解決方案

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

有關更多詳細信息，請參見柱塞 。

我可以在您的原始代碼中發現的幾個問題：

• 使用controller as語法時，請使用'this'關鍵字，而不是控制器內部的$scope
• ng-model="pageUrl"應該是ng-model="ctrl.pageUrl"

僅供參考， isButtonVisible()將在每個摘要周期進行評估，因此不需要ng-change觀察者。