Question

在输入有效的指令文字之前，保持“保存”按钮的最佳方法是什么？我尝试在“保存”按钮上使用ng-disable，但是一旦我在输入字段中输入内容它就会被激活。

HTML

<div class="row" ng-init="initUpsert()">
  <div class="input-field col m4">
    <label class="active" for="instructionText">Instruction Text</label>
    <autocomplete
      ng-if="!currentQuestion.id || currentQuestion.status === 'flagged'"
      ng-model="currentQuestion.Instruction.instructionText"
      data="instructionChoices"
      attr-placeholder="Instruction Text"
      attr-input-class="validate"
      attr=id="instructionText"
      on-type="getRemoteInstructions"
      on-select="checkInstructionText"
      autocomplete-required="true"></autocomplete>
    <input ng-if="currentQuestion.id && currentQuestion.status !== 'flagged'" type="text" ng-model="currentQuestion.Instruction.instructionText" ng-disabled="true">
  </div>
    <button class="modal-action waves-effect btn waves-green teal white-text btn-flat" ng-click="spellcheck(true)" ng-show="currentQuestion.status === 'review' && isModified === true">
  Save and Add Another
    </button>

    <button class="modal-action waves-effect btn waves-green teal white-text btn-flat" ng-click="spellcheck(false)" ng-show="currentQuestion.status === 'review' && isModified === true" ng-disable="invalidInstructionText">
      Save
    </button>

  </div>
  <ng-include src="'/views/modals/spellCheckModal.html'"></ng-include>
</div>

控制器

$scope.checkInstructionText = function(instruction) {
  $scope.validInstructionText = true;
  $http.get("/api/instructions?searchInstructionText=" + instruction).then(function(response) {
    if (instruction = response.data) {
      window.alert ("You've selected a valid instruction text");
      return $scope.validInstructionText = false;
    } 
    else {
      console.log("disable the save buttons");
      return $scope.validInstructionText = true;
    }
  });
};

Answer 1

“保存”按钮中有一个拼写错误：您写了ng-disable而不是ng-disabled。当你在http回调中更新$scope.validInstructionText的值时，它应该一旦修复就可以工作。

曾经的事情（我不知道你的情况是否可能，但是......）：我认为每次用户想要避免进行服务器调用（即http请求）都是好的保存。您只能在场景后面进行一次调用（例如在控制器init上），将结果保存在$ scope中，然后将其用于验证。这样会更快。

此外，您的输入ngDisabled指令会查找表达式$scope.true，而不是布尔值true。由于$scope.true未定义，因此评估为falsy，因此您永远无法禁用它。如果您需要，有关ngDisabled的Angular文档中有更多信息。

Answer 2

ng-click="invalidInstructionText? spellcheck(false) : return"

试试

输入数据时，禁用按钮不在数据库中

2 个答案: