I have written a code for adding messages to the page below the textbox. The text box has an add button . As soon i write a message in the textbx and click on add, the message should appear on the next line. I have used ng-repeat to repeat the process of adding messages whenever the add button is clicked. However i am getting error messages –
Expression ‘addMessage()’ is non-assignable.
And Error –
angular.js:13283 ReferenceError: message is not defined.
Please help me with the code.
<html ng-app="Swabhav.Message">
<head>
<title>message-app</title>
<script src="angular.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="MessageAdd">
<h3>To Add Message:</h3>
<input text="text" ng-model="addMessage()">
<li ng-repeat="mess in message">
<button type="button" ng-click="addMessage()">Add</button>
</li>
<br>
<li><p> {{mess}}</li>
</p><br>
</div>
<script>
angular.module("Swabhav.Message", [])
.controller("MessageAdd", ["$scope", function($scope) {
$scope.message = [];
$scope.addMessage = function() {
$scope.message.push(message);
};
}]);
</script>
</body>
</html>
2
Answers
Try it:
HTML
CONTROLLER:
You have some errors.
First, you can’t assign a function to a model. You have to add te value on your model to the array of messages. Then your button has to be before the ng-repeat or you will have one botton for each element on the list and {{mess}} inside the ng-repeat.
In your controller I would rename the array to messages and assign a empty array to your model.
Try this code and tell me if it is what you are trying to do and if you understand the code
Jsfddle