[HTML/JavaScript/AngularJS] input 태그 value 속성 not working

html

HTML에서 input tag의 value attribute가 계속 먹히지 않는 에러?가 발생하여 뭐가 문젠지 찾아보다가 해답을 알아냈습니다.

AngularJS가 문제였습니다!

 

제 코드는 다음과 같았습니다.

//value 값이 잘 출력됨
<input class="conInput" type="text" value="나온다" disabled/>

//value 값이 출력되지 않음
<input class="conInput infoInput" type="text" value="외않나와!!" ng-class="{error : noNameErr}" ng-keydown="inputKeyPress($event, 'name');" ng-model="userName" ng-blur="validation('name');"  />

 

이것저것 복잡해보이긴 하지만 어쨌든 inputbox 였고, 초기 값을 지정해줘야하는데 계속 비어있는 채로 화면이 출력되어 골머리를 썩었습니다. 또 위쪽 에선 나오고 아래껀 나오지 않아서 뭐가 문젠가 했는데,

 

https://stackoverflow.com/questions/5772124/input-value-doesnt-display-how-is-that-possible/37814282#37814282

스택오버플로우에서 해답을 얻었습니다ㅎㅎ

 

 

 

결론 :

태그 내부의 angular attribute들을 지우거나,

angular의 controller부분에서 해당 태그의 ng-model에 넣어준 변수의 초기값을 넣어주면 됩니다!

 

 

제 코드는 다음과 같았습니다.

//변경 전
$scope.userName = "";

//변경 후
$scope.userName = "나온다!!!!!!ㅠㅜ";

변경 전에는 위처럼 스크립트에서 값을 ""로 지정하다보니, 화면에선 아무 값도 출력되지 않는 것이었습니다.

아래 코드처럼 수정하면 원하는 텍스트가 나옵니다.

 

 

즉, angularJS 속성을 사용하면 html태그에서 value값을 넣어주는건 먹히지 않아요!