入力されたデータがデータベースにないときにボタンを無効にする

Question

有効な指示テキストが入力されるまで「保存」ボタンを無効にしたままにする最良の方法は何ですか？私は "Save"ボタンで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の代わりに0123を書きました。 httpコールバックの$scope.validInstructionTextの値を更新すると、一度修正する必要があります。

私はそれが可能かどうかはわかりませんが...）：私は、サーバコール（つまりhttpリクエスト）を避けるのが良いと思う保存する。あなたはシーンの後ろに一度だけ呼び出すことができます（コントローラのinitなど）。$スコープに結果を保存し、それを検証に使用します。そんなに速くなるでしょう。

また、入力ngDisabledディレクティブは、式$scope.trueを検索し、ブール値trueは検索しません。 $scope.trueは定義されていないため、falsyと評価されるため、無効にすることはできません。 Angularのドキュメントには、必要に応じてngDisabledについての情報があります。

Answer 2

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