Twitter Bootstrap Question posted in

How to add text from textbox in angularjs1-Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

    Try it:

    HTML

    <body>
  <div ng-controller="MessageAdd">
    <h3>To Add Message:</h3>
    <input text="text" ng-model="messagetext">
    <button type="button" ng-click="addMessage()">Add</button>
    <li ng-repeat="mess in message">{{mess}}</li>
  </div>
</body>

    CONTROLLER:

    angular.module("Swabhav.Message",[])
.controller("MessageAdd",["$scope",function($scope){
  $scope.messagetext = "";
  $scope.message=[];
  $scope.addMessage =function(){
    $scope.message.push($scope.messagetext);
    $scope.messagetext = "";
  }
}]);
    Login or Signup to reply.
  2. 0

    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.

     <input text="text" ng-model="message">
       <button type="button" ng-click="addMessage()">Add</button>
       <ul>
          <li ng-repeat="mess in messages">
            {{mess}}
        </li>  
       </ul>

    In your controller I would rename the array to messages and assign a empty array to your model.

    $scope.messages=[];
$scope.message = "";

$scope.addMessage =function(){
  $scope.messages.push($scope.message);
  $scope.message = "";
}

    Try this code and tell me if it is what you are trying to do and if you understand the code

    Jsfddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search