0

我想要一个简单的输入字段，您可以在其中输入 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 提供的建议，我将代码修改为如下所示，一切看起来都很好。在如何将参数传递给 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>
4

1 回答 1

0

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

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

于 2013-07-18T19:59:01.580 回答