Updating functions using the ng-model

Question

What do I need to do to keep the message updated when changing the LastMessage? Thank you in advance.

   angular.module('myApp',[]).controller('MessageController', function($scope) {
     getMessage = function(x){
        return "Hello, " + x + ":)";
      }
     $scope.lastMessage = "StackOverflow";
     $scope.message = getMessage($scope.lastMessage);    
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
      <div ng-controller="MessageController">
        <input type="text" ng-model="lastMessage" ng-model-options="{allowInvalid: true}">
        <p ng-bind="lastMessage"></p>
        <p ng-bind="message"></p>
      </div>  
    </body>

score 0 · Answer 1 · answered May 26 '17 at 12:22

You could call getMessage function on ng-change of last message :

 angular.module('myApp',[]).controller('MessageController', function($scope) {
 $scope.getMessage = function(x){
     $scope.message = "Hello, " + x + ":)";
  }
 $scope.lastMessage = "StackOverflow";    
});


<body ng-app="myApp">
   <div ng-controller="MessageController">
    <input type="text" ng-model="lastMessage" ng-change="getMessage(lastMessage)" ng-model-options="{allowInvalid: true}">
    <p ng-bind="lastMessage"></p>
    <p ng-bind="message"></p>
  </div>  
</body>

I tried so, but it did not help. Thank you for the answer! – Bellatrix988 May 26 '17 at 12:46 — Bellatrix988, May 26 '17 at 12:46

Immanuel Kirubaharan · Answer 2 · 2017-05-26T13:02:03.880

0

You can try this code as shown as below,

Template:

<input type="text" ng-model="lastMessage" ng-change="getMessage(lastMessage)" ng-model-options="{allowInvalid: true}">
<p ng-bind="lastMessage"></p>
<p ng-bind="message"></p>

Controller Code:

$scope.getMessage = function(x){
  $scope.lastMessage = x;
  $scope.message = "Hello, " + x + ":)";
}
$scope.getMessage('StackOverflow');

edited May 26 '17 at 13:02

answered May 26 '17 at 12:23

Immanuel Kirubaharan

1,094
1
11
17

I tried so, but it did not help. Thank you for the answer! – Bellatrix988 May 26 '17 at 12:46
Here is the plnkr link which works anyway! http://plnkr.co/edit/W9VspRk3fREKJvxjuRcM?p=preview – Immanuel Kirubaharan May 26 '17 at 12:52
Hmm. It's strange. Excuse me. And thank you very much. I'll try again. – Bellatrix988 May 26 '17 at 12:58

TheVillageIdiot · Accepted Answer · 2017-05-26T12:33:04.933

0

try watching lastMessage variable:

$scope.$watch('lastMessage ', function() {
    $scope.message = "Hello, " + $scope.lastMessage + ":)";;
});

For more information on watch and apply look here.

angular.module('myApp',[]).controller('MessageController', function($scope) {
     $scope.lastMessage = "StackOverflow";
     $scope.message=$scope.lastMessage;
     $scope.aa="";
     $scope.bb="";
     $scope.$watch('lastMessage',function(){
        $scope.message= "Hello, " + $scope.lastMessage + ":)";
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

 <body ng-app="myApp">
      <div ng-controller="MessageController">
        <input type="text" ng-model="lastMessage" ng-model-options="{allowInvalid: true}">
        <p ng-bind="lastMessage"></p>
        <p ng-bind="message"></p>
      </div>
      <p>
        <p ng-bind="aa"></p>
        <p ng-bind="bb"></p>
      </p>
    </body>

edited May 26 '17 at 12:33

answered May 26 '17 at 12:24

TheVillageIdiot

40,053
20
133
188

Thank you very much! On this example it worked, I'll try to transfer it to the set of functions that call the variable from $scope in my project. Thank you all :) – Bellatrix988 May 26 '17 at 12:44
Glad I'm of some help. There is a caution that using too many `$watch` slows down the app. Also, try moving to `Angular 2`. – TheVillageIdiot May 26 '17 at 12:51
To avoid slowing the app with `$watch`, consider using the [ng-change directive](https://docs.angularjs.org/api/ng/directive/ngChange) on input elements. – georgeawg May 26 '17 at 17:38

score 0 · Answer 4 · answered May 26 '17 at 12:27

0

try this one

  <div ng-controller="MessageController">
    <input type="text" ng-model="lastMessage" ng-model-options="{allowInvalid: true}">
    <p ng-bind="lastMessage"></p>
    <p ng-bind="getMessage(lastMessage)"></p>
  </div>

answered May 26 '17 at 12:27

aseferov

6,155
3
17
24

score 0 · Answer 5 · answered May 26 '17 at 13:16

Do you have any specific reason to use ng-bind or functions? Because for something like this you can just do this

  <input type="text" ng-model="lastMessage" ng-model-options="{allowInvalid: true}">
  <p>{{lastMessage}}</p>
  <p ng-if="lastMessage.length"> Hello {{lastMessage}} :)</p>

ng-if is in case if you only want to show the message when user has typed something.

Updating functions using the ng-model

5 Answers5