使用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模型更新函數

回答

相關問題