Question

我想只在输入字段输入文本时启用按钮。到目前为止，我的app.js上有这段代码

.controller("EnableDisable", function(){
  $scope.editableInput = false;
})

.directive("inputDisabled", function(){
  return function(scope, element, attrs){
    scope.$watch(attrs.inputDisabled, function(val){
      if(val)
        element.removeAttr("disabled");
      else
        element.attr("disabled", "disabled");
    });
  }
});

这是视图实现：

<div ng-controller="EnableDisable">
<input type="text" input-disabled="editableInput" />
<button ng-click="editableInput = !editableInput">enable/disable</button>
      </div>

这是插件网址： https://plnkr.co/edit/bHtZJ1H5JvM2XTuhft6J?p=preview 目前，当我启动应用程序时，默认情况下不会禁用该按钮。请与上述挑战一起在输入字段中输入文本时如何使按钮可单击（接收事件）。请帮助！

Answer 1

你可以用Angular做到这一点。

<input type="text" ng-model="textEntered" />
<button ng-disabled="!textEntered">Continue</button>

Answer 2

你必须像这样设置初始范围值。注意我已将其设置为false，因此条件将取消并在页面加载时禁用按钮。然后我相应地设置监视输入值以切换范围值。

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

app.controller("EnableDisable",  function(){    
  $scope.textEntered=false;

  $scope.$watch($scope.textEntered,function(v)
  {
   if(v)
   {
     $scope.textEntered=true;
   }
   else
   {
     $scope.textEntered=false;
   }
  }
  );
});

和html是 -

<input type="text" ng-model="textEntered" />
<button ng-disabled="!textEntered">Continue</button>

https://plnkr.co/edit/o1Im8MSXbEa8kyqPqBB9?p=preview

Answer 3

试试这个

controller("EnableDisable", function($scope){
  $scope.textEntered = "";
});

HTML：

<button ng-disabled="!textEntered">enable/disable</button>

请参阅Plunker

在输入字段中输入文本时启用按钮

3 个答案: