Question

我正在设计一个Angular应用程序（我的第一个），到目前为止，一切都变得相对简单，但是我遇到了一个问题。在我的应用程序中，用户创建一个文本项列表，每个项都附加一些格式。这会在我的控制器中创建一个列表。

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

这一切都很完美，但是我需要将这些信息反馈给用户，并且需要在它返回页面之前略微修改它。

我可以这样做：

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

但这不允许我在数据出现之前修改数据。

现在我正在使用ng-change调用一个函数，该函数将生成的字符串存储在变量中：

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

这是有效的，除了我需要对所有内容进行ng-change以获得实时输出。我的处理工作不资源密集型，可以在每次用户交互时运行。

如果我的控制器中的items变量被更新，我怎样才能实现这一点？

Answer 1

我不确定在显示模型之前如何修改模型。这很棘手，因为如果你需要一些复杂的修改，它肯定会改变用户输入的值。

所以如果你制作2个单独的模型会更好。然后，行input和output使用一个函数来解析输入的输出。

你可以这样做。（点击Run code Snippet）

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <script data-require="angular.js@1.4.x" 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>

＆＃13;

这是plunkr（如果在SO上加载角度有问题）

编辑：更新代码以使其看起来更好。

在显示前修改模型

1 个答案: