Reputation: 959
I'm new to AngularJS and now facing the following problem.
Inserting new items works well by clicking the submit button, but doesn't work when I hit the Enter button. With enter the $scope.newQueryInput is undefined.
Also with the first enter, I get a new item inserted (with an empty string). With the second hit nothing is happening, which should be the expected behaviour for the first hit too.
<!--HTML part-->
<ul ng-controller="QueryCtrl">
<li ng-repeat="query in queries">
<i class="fa fa-trash onhover alignleft" title="delete query" ng-click="removeQuery($index)"></i>
<a href="#">{{query.keyword}}</a>
</li>
<li class="addnew">
<form ng-submit="addQuery()" action="">
<input type="text" ng-model="newQueryInput" placeholder="Add new query"/>
<input type="submit" />
</form>
</li>
</ul>
// script.js
var App = angular.module('App', []);
function QueryCtrl($scope) {
$scope.queries = queries;
$scope.addQuery = function() {
console.log($scope.newQueryInput);
console.log($scope);
if (typeof $scope.newQueryInput != "undefined") {
newQuery = { "keyword" : $scope.newQueryInput }
$scope.queries.push(newQuery);
$scope.newQueryInput = "";
}
};
$scope.removeQuery = function(index) {
$scope.queries.splice(index, 1);
}
};
Upvotes: 1
Views: 2035
Reputation: 2369
I have done 3 fixes to your form:
Changed $scope.queries = queries;
to $scope.queries = [];
because queries is undefined
Added $event.preventDefault(); to submit handler so form will not be submitted.
Added check for empty string $scope.newQueryInput !== ""
And now it works with Enter key or button click.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body ng-app="plunker">
<ul ng-controller="QueryCtrl">
<li ng-repeat="query in queries">
<i class="fa fa-trash onhover alignleft" title="delete query" ng-click="removeQuery($index)"></i>
<a href="#">{{query.keyword}}</a>
</li>
<li class="addnew">
<form ng-submit="addQuery($event)" action="">
<input type="text" ng-model="newQueryInput" placeholder="Add new query"/>
<input type="submit" />
</form>
</li>
</ul>
</body>
<script>
var app = angular.module('plunker', []).controller('QueryCtrl', ['$scope', function($scope) {
$scope.queries = [];
$scope.addQuery = function($event) {
$event.preventDefault();
if (typeof $scope.newQueryInput != "undefined"
&& $scope.newQueryInput !== "") {
newQuery = { "keyword" : $scope.newQueryInput }
$scope.queries.push(newQuery);
$scope.newQueryInput = "";
}
};
$scope.removeQuery = function(index) {
$scope.queries.splice(index, 1);
}
}]);
</script>
</html>
Upvotes: 1