次の機能を備えた小さなAngularアプリを作成しようとしています:
フォームは空のプレースホルダー テキストで始まります。ユーザーは必要なテキストボックスにアイテムを入力します。Angular はアイテムをコレクションにプッシュします。フォーム入力をデフォルトにリセットします。
私はこのようなコードを持っています (jsfiddle: http://jsfiddle.net/Nn37v/1/ ): HTML:
<div ng-controller="MyCtrl">
<form name="talkForm">
<input ng-model="newVoice" placeholder="Say something" required />
<button ng-click="saySomething()">Say</button>
</form>
<ul>
<li ng-repeat="c in conversation">{{c}}</li>
</ul>
</div>
Javascript:
function MyCtrl($scope) {
$scope.conversation =[];
$scope.saySomething = function(){
if ($scope.talkForm.$valid){
//push to list
$scope.conversation.push($scope.newVoice);
$scope.newVoice='';
}
}
}
私が直面している問題は、 $scope.newVoice='' が実行されると、フォームが無効になり、フォームに適切に入力するように促す便利な HTML5 検証ポップアップが表示されることです。明らかに、これは私が望む動作ではありません-Angularでこれを行う正しい方法は何ですか?