컨트롤러 실패시 텍스트 제출 방지

나는 Todo 목록과 관련된 Angular의 기본 페이지에서 간단한 예제를 실행 중입니다. 입력란이 비어있을 때 사용자가 할 일을 제출하지 못하도록하고 싶습니다. 문제는 내가 페이지를로드 할 때 내가 할 첫 번째 일은 입력 필드를 클릭하고 Enter 키를 누른 다음 빈 할 일 목록에 Todo 목록이 추가된다는 것입니다. 그러나 그 후에 유효성 검사가 작동합니다. 이 작업을 수행하는 다른 방법이 있다는 것을 알고 있지만이 버그가 존재하는 이유와 해결 방법을 알고 싶습니다.컨트롤러 실패시 텍스트 제출 방지

<form ng-submit="addTodo()"> 
    <input ng-model="todoText" placeholder="Add a todo here" type="text" /> 
    <input class="button" type="submit" value="add"> 
</form>

아래 내 HTML 내 JS 파일

$scope.addTodo = function() { 
    var text = $scope.todoText; 
    if (text != "") { 
    $scope.todos.push({text:$scope.todoText, done:false}); 
    $scope.todoText = ''; 
    } 
};

출처

2012-12-28 jason328

$scope.todoText이 undefined, 그래서 그것은 당신의 조건을 통과 한 다음 모델의 변수에 따라, 빈 문자열 ''로 설정

중 하나를 수행하거나 if (!$scope.todoText) { 빈 문자열로 초기화 $scope.todoText = '';

컨트롤러 6,

는 :

$scope.todoText = ''; 

$scope.addTodo = function() { 
    if ($scope.todoText != "") { 
    $scope.todos.push({text:$scope.todoText, done:false}); 
    $scope.todoText = ''; 
    } 
};

출처

2012-12-28 02:47:08

에서 시도 되세요. 나는 당신의 대답이 의미가 있다고 생각했지만 지금은 여전히 똑같은 행동을하고 있음을 테스트했습니다. – jason328

'$ scope.todoText'를 변수로 선언 한 다음 if 문 내에서 변수를 검사하면 여전히 버그가 존재하므로 쓸데없는 것으로 판명되었습니다. 내 코드가 업데이트되었습니다. – jason328

'$ scope.todoText = '';를 설정하면 컨트롤러에서 빈 문자열로 초기화됩니다. addTodo 함수가 아닌 컨트롤러에서 모델을 초기화해야합니다. 위의 코드를 추가했습니다. –

는 입력에 required 속성을 사용하여 시도 적이 있습니까?

<input type="text" 
     ng-model="todoText" 
     required <------------- prevents submission and marks the view as invalid 
     size="30" 
     placeholder="add new todo here" />

사실, 코드가 작동하지 않습니다 http://jsfiddle.net/hbulhoes/uBXfN/

출처

2012-12-28 11:10:16 Humberto

컨트롤러 실패시 텍스트 제출 방지

답변

관련 문제