입력 한 데이터가 데이터베이스에없는 경우 버튼을 비활성화하십시오.

유효한 지침 텍스트를 입력해야만 "저장"버튼을 비활성화하는 것이 가장 좋은 방법은 무엇입니까? "Save"버튼에서 ng-disable을 사용하려했지만 input 필드에 무엇인가 넣으면 활성화됩니다.입력 한 데이터가 데이터베이스에없는 경우 버튼을 비활성화하십시오.

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; 
    } 
    }); 
};

출처

2016-06-29 Jason

이 '저장'버튼에 오타가 있다는 것을보십시오 당신이대신 ng-disable을 썼다. http 콜백에서 $scope.validInstructionText의 값을 업데이트하면 고정 된 상태로 작동해야합니다.

한번은 (사용자의 경우 가능할지 모르겠지만 ...) : 사용자가 원할 때마다 서버 호출 (즉, http 요청)을하지 않는 것이 좋을 것이라고 생각합니다. 저장합니다. (예를 들어 컨트롤러 초기화에서) 장면 뒤에서 한 번만 호출을하고 결과를 $ 범위에 저장 한 다음 유효성 검사에 사용할 수 있습니다. 그렇게 빨리 될 것입니다.

또한 입력 된 ngDisabled 지시어는 $scope.true이라는 표현식을 찾고 부울 true은 찾지 않습니다. $scope.true은 정의되지 않았으므로 falsy으로 평가되므로 절대로 사용할 수 없게됩니다. Angular 문서에는 필요한 경우 ngDisabled에 대한 정보가 더 있습니다.

출처

2016-06-29 21:21:47 paulwasit

감사합니다. 내가 작동하도록했는데, $ scope.validInstructionText = true를 함수 외부로 옮긴 다음 ng-disable을 ng-disabled로 변경했습니다. – Jason

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

는

출처

2016-06-29 20:58:52 ceckenrode

입력 한 데이터가 데이터베이스에없는 경우 버튼을 비활성화하십시오.

답변

관련 문제