使用ng Show显示/隐藏按钮

Show/hide button using ng-show

本文关键字：隐藏 按钮 显示 ng Show 使用      更新时间：2023-09-26

我遇到了一个与按钮可见性有关的问题。当表单字段中没有文本时，我必须隐藏一个按钮，并在填充时将其显示回来。我有一些代码：

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

这是我的解决方案

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了解更多详细信息。

我能在你的原始代码中发现的几个问题：

  • 使用controller as语法时，请在控制器中使用"this"关键字，而不是$scope
  • ng-model="pageUrl"应为ng-model="ctrl.pageUrl"

仅供参考，isButtonVisible()将在每个摘要周期进行评估，因此不需要ng-change的观察者。

试试这个。我举了一个简单的例子。

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>

相关文章：