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

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

＆＃13;

Window::Window(int width, int height, const std::string& title, bool full_screen) :
    m_fullscreen(full_screen)
{
    SDL_Init(SDL_INIT_EVERYTHING);

        SDL_GL_SetAttribute(SDL_GL_RED_SIZE, 8);
        SDL_GL_SetAttribute(SDL_GL_GREEN_SIZE, 8);
        SDL_GL_SetAttribute(SDL_GL_BLUE_SIZE, 8);
        SDL_GL_SetAttribute(SDL_GL_ALPHA_SIZE, 8);
        SDL_GL_SetAttribute(SDL_GL_BUFFER_SIZE, 32);
        SDL_GL_SetAttribute(SDL_GL_DOUBLEBUFFER, 1);

    //SDL_Window* in private of class declaration 
    m_window = SDL_CreateWindow(title.c_str(), SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, width, height, SDL_WINDOW_OPENGL | SDL_WINDOW_RESIZABLE);
    //SDL_GLContext in private of class declaration 
    m_glContext = SDL_GL_CreateContext(m_window);

    std::cout << "GL Version: " << glGetString(GL_VERSION) << std::endl;
    glewExperimental = GL_TRUE;
    if(glewInit() != GLEW_OK || !glVersionAbove(3.0)){
        std::cerr << "Glew failed to initialize...\n";
        exit(-150);
    }
}

＆＃13;

filters([
          nga.field('project', 'reference')
                .label('Project')
                .targetEntity(project)
                .targetField(nga.field('nome'))
                .remoteComplete(true, {
                    refreshDelay: 200,
                    searchQuery: function(search) { return { q: search }; }
                })
        ])

＆＃13;

Answer 2

Here是我的解决方案

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语法时，请使用＆＃39; this＆＃39;关键字，而不是控制器中的$scope
ng-model="pageUrl"应为ng-model="ctrl.pageUrl"

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

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

2 个答案: