1

在输入有效的指令文本之前,保持“保存”按钮禁用的最佳方法是什么?我尝试在“保存”按钮上使用 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;
    }
  });
};
4

2 回答 2

1

您的“保存”按钮中有一个错字:您写ng-disable的是ng-disabled. $scope.validInstructionText当您更新http 回调中的值时,它应该一旦修复就可以工作。

虽然有一次(我不知道在你的情况下是否可能,但是......):我认为避免每次用户想要保存时都进行服务器调用(即 http 请求)可能会很好。您只能在后台调用一次(例如在控制器 init 上),将结果保存在 $scope 中,然后将其用于验证。这样会更快。

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

于 2016-06-29T21:21:47.417 回答
0
ng-click="invalidInstructionText? spellcheck(false) : return"

试试看

于 2016-06-29T20:58:52.637 回答