使用ng模型更新函数

当更改LastMessage时，我需要如何保持消息更新？预先感谢您。使用ng模型更新函数

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>

来源

2017-05-26 Bellatrix988

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

来源

2017-05-26 12:24:55 TheVillageIdiot

非常感谢！在这个例子中，它试图将它转移到我的项目中$ scope调用变量的函数集。谢谢大家:) – Bellatrix988

很高兴我有一些帮助。请注意，使用太多的$ watch会降低应用程序的速度。另外，尝试转向Angular 2。 – TheVillageIdiot

为避免使用'$ watch'减慢应用速度，请考虑在输入元素上使用[ng-change指令]（https://docs.angularjs.org/api/ng/directive/ngChange）。 – georgeawg

你可以称之为上最后一条消息的NG-变化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>

来源

2017-05-26 12:22:34

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

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

模板：

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

来源

2017-05-26 12:23:28

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

这是反正工作的plnkr链接！ http://plnkr.co/edit/W9VspRk3fREKJvxjuRcM?p=preview –

嗯。真奇怪。打扰一下。非常感谢。我会再尝试。 – Bellatrix988

试试这个

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

来源

2017-05-26 12:27:17 aseferov

没有帮助，但谢谢你的回应！ – Bellatrix988

你有什么特别原因需要使用NG绑定或功能？因为这样的事情你可以做这个

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

NG-如果是在情况下，如果你只是想显示消息时，用户键入的东西。

来源

2017-05-26 13:16:08

使用ng模型更新函数

回答

相关问题