Question

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

Answer 1

你可以在最后一条消息的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>

Answer 2

您可以尝试此代码，如下所示，

模板：

<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');

Answer 3

尝试观看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>

Answer 4

尝试这个

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

Answer 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如果您只想在用户键入内容时显示消息，则会出现这种情况。

使用ng-model更新功能

5 个答案: