使用 ng-model 更新函数答案

【问题标题】：Updating functions using the ng-model使用 ng-model 更新函数
【发布时间】：2017-05-26 12:16:32
【问题描述】：

更改 LastMessage 时，我需要做些什么来保持消息更新？先感谢您。

   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>

【问题讨论】：

标签： javascript angularjs angularjs-ng-model

【解决方案1】：

试试看lastMessage变量：

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

有关watch 和apply 的更多信息，请查看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>

【讨论】：

非常感谢！在这个例子中它有效，我将尝试将它转移到我项目中从 $scope 调用变量的函数集。谢谢大家:)
很高兴我能帮上忙。需要注意的是，使用过多的$watch 会降低应用程序的速度。另外，请尝试移至Angular 2。
为避免使用$watch 降低应用速度，请考虑在输入元素上使用ng-change directive。

【解决方案2】：

您可以在最后一条消息的 ng-change 上调用 getMessage 函数：

 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>

【讨论】：

我试过了，但没有帮助。谢谢你的回答！

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

你可以试试这个代码，如下图，

模板：

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

控制器代码：

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

【讨论】：

我试过了，但没有帮助。谢谢你的回答！
这是 plnkr 链接，无论如何都可以使用！ plnkr.co/edit/W9VspRk3fREKJvxjuRcM?p=preview
嗯。真奇怪。打扰一下。非常感谢你。我会再试一次。

【解决方案5】：

你有什么特别的理由使用 ng-bind 或函数吗？因为对于这样的事情，你可以这样做

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

ng-if 如果您只想在用户输入内容时显示消息。

【讨论】：