我希望有一个简单的输入字段，您可以在其中输入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提供的建议，我将代码修改为如下所示，一切似乎都很好。 关于如何将param传递给角度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>I want to have a simple input field where you can type in a javascript expression, and have it be eval-ed on entry, kind of like a poor-man's calculator.
So far, what I have sort of works.. but now I want to decorate it with css classes when the expression itself is invalid. Can someone suggest a way to do it?
<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>Using the suggestion offered by Manny D, I modified the code to look as follows, and all seems well. There is a caution in how to pass param to a filter function in angular js about not using the 'this' param directly, but I think I'm ok here, doing that.. Anyone care to comment?
<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>最满意答案
“this”的问题在于，如果您正在进行多个过滤器评估，它将无法工作。 范围不与您正在处理的项目隔离。 但有一种更简单的方法。 只需使用ng-class检查该值是否与过滤后的值相同，并根据该值设置类。 我也确认它可以使用多个表达式。
http://plnkr.co/edit/cRvSCy?p=preview
The problem with the "this" is that it won't work if you're doing more than one filter evaluation. The scope isn't isolated to the item you're working on. But there is an easier way. Just use ng-class to check whether the value is the same as the filtered value and set the class based on that. I also confirmed that it would work with multiple expressions.
http://plnkr.co/edit/cRvSCy?p=preview
更多推荐
发布评论