在顯示之前修改模型

我正在設計一個Angular應用程序（我的第一個應用程序），到目前爲止，所有事情都一直比較簡單，但是我遇到了問題。在我的應用程序中，用戶創建一個文本項目列表，每個項目都附帶一些格式。這會在我的控制器中創建項目列表。在顯示之前修改模型

items = [{"text":"Example","bold":true},{"text":"More..."}...]

這一切都完美的作品，但我需要給這個信息反饋給用戶，需要稍微修改對象時，它可以追溯到到頁面之前。

我可以做這樣的事情：

<span>{{cntrl.items}}</span>

但是，這並不讓我修改數據，它在模型中顯示出來了。

現在我用NG-變化調用存儲在一個變量中生成的字符串的函數：

<span>{{cntrl.output}}</span>

這工作，但我需要把一切的NG-變化獲取實時輸出。我的處理工作是而不是資源密集型，並且可以在每個用戶交互上運行。

當我的控制器中的items變量更新時，我該如何做到這一點？

來源

2016-02-27 Ezekiel Elin

我不確定在顯示它之前如何修改模型。這是非常棘手的，因爲如果你需要一些複雜的修改，它肯定會改變用戶輸入的值。

所以，如果你製作2個獨立的模型會更好。行input和output然後使用一個函數來解析輸入的輸出。

你可以做這樣的事情。（打Run code Snippet）

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 

 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script type="text/javascript" charset="utf-8"> 
 
    
 
     angular.module('myApp', []) 
 
     .controller('MainCtrl', function($scope, myService) { 
 
     $scope.userInput = ''; 
 
     $scope.userOutput = function(){ 
 
      return myService.parser($scope.userInput) 
 
     }; 
 
     }) 
 
     .service('myService', function(){ 
 
     return { 
 
      parser: function(input){ 
 
      return input ? input+'---parsed' : 'User has not input anything...'; 
 
      } 
 
     } 
 
     }); 
 
    
 
    </script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <input type="text" ng-model="userInput" placeholder="input stuff here..."> 
 
    <div>{{userOutput()}}</div> 
 
    </body> 
 

 
</html>

這裏是一個plunkr（如果裝上SO角度得到了一些問題）

編輯：更新代碼，使它看起來更好。

來源

2016-02-27 16:00:21

謝謝，這工作非常好！ –

在顯示之前修改模型

回答

相關問題