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