Why does clicking the button add two empty strings to the html page rather than the appropriate quote?
Service:
quotes.addData = function(quote){
quotesArr.push(quote);
}
Controller:
$scope.quoteToAdd = {
author : $scope.quoteAuthor,
text: $scope.quoteText
};
$scope.addQuote = quoteService.addData;
}
HTML:
Author :<input type="text" ng-show="showAdd" ng-model='quoteAuthor' name="name" value="">
Quote:<input type="text" ng-show="showAdd" ng-model='quoteText' name="name" value="">
<button ng-click='addQuote(quoteToAdd)' ng-show="showAdd" type="button" name="button">Submit</button>
You have the wrong ng-model bindings in your form:
Author :<input type="text" ng-show="showAdd" ng-model='quoteToAdd.author' name="name" value="">
Quote:<input type="text" ng-show="showAdd" ng-model='quoteToAdd.text' name="name" value="">
<button ng-click='addQuote(quoteToAdd)' ng-show="showAdd" type="button" name="button">Submit</button>
The above code you have since the controller object is initialized by value of the scope properties initially not by reference. The new controller listed below should work for what you want done.
Controller (new):
$scope.quoteToAdd = {
author : null,
text: null
};
$scope.addQuote = quoteService.addData;
}
Controller (old):
$scope.quoteToAdd = {
author : $scope.quoteAuthor,
text: $scope.quoteText
};
$scope.addQuote = quoteService.addData;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments