Question

我希望有一个简单的输入字段，您可以在其中键入javascript表达式，并在输入时对其进行评估，有点像穷人的计算器。

到目前为止，我的工作有点......但是现在我想在表达式本身无效时用css类来装饰它。有人可以建议一种方法吗？

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        function Ctl($scope) {
          $scope.expr = '1+1';
        }

        angular.module('filters', []).
          filter('evaluate', function() {
            return function(input) {
              try {
                return eval(input);
              } catch (e) {
                return input;
              }
            };
          });

        angular.module('main', ['filters']);</script>
<head>

<body ng-controller="Ctl" ng-app="main">
  <div><input type="text" ng-model="expr"></div>
  <span>{{expr|evaluate}}</span>
</body>

使用Manny D提供的建议，我将代码修改为如下所示，一切似乎都很好。在how to pass param to a filter function in angular js中有一个关于不直接使用'this'参数的警告，但是我觉得我很好，这样做......有人关心评论吗？

<head>
    <style type="text/css">
    .red  {background-color: #fee;}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        function Ctl($scope) {
          $scope.cls = 'green';
          $scope.expr = '1+1';
        }

        angular.module('filters', []).
          filter('evaluate', function() {
            return function(input, a1, a2) {
              try {
                this.cls = 'green';
                return res = eval(input);
              } catch (e) {
                this.cls = 'red';
                return input;
              }
            };
          });

        angular.module('main', ['filters']); // declare dependencies</script>
<head>

<body ng-controller="Ctl" ng-app="main">
  <div><input type="text" ng-class="cls" ng-model="expr"></div>
  <span>{{expr|evaluate}}</span>
</body>

Answer 1

“this”的问题在于，如果您正在进行多个过滤器评估，它将无效。范围不与您正在处理的项目隔离。但是有一种更简单的方法。只需使用ng-class检查该值是否与过滤后的值相同，并根据该值设置类。我还确认它可以使用多个表达式。

http://plnkr.co/edit/cRvSCy?p=preview

如何在eval错误上用css类装饰输入字段

1 个答案: