angular 从表达式计算变量

Question

我需要根据服务返回的表达式动态显示小计。请参阅下面的样本项目结构。属性值绑定到文本输入。如果任何输入值发生变化，则根据标签中的表达式更新小计。执行此操作的最佳方法是什么？

注意：fieldname/Value 对的数量可能会有所不同。

$scope.item = [
  {fieldName: "fname1", value: 2},
  {fieldName: "fname2", value: 5},
  {fieldName: "fname3", value: 4},
  {fieldName: "fname4", value: 6},
  {fieldName: "fname5", value: 3},
  {fieldName: "subTotal1", expression: "['fname1'] + ['fname2'] +['fname3'] +['fname4'] +['fname5'] +"}
]

Answer 1

如果您需要根据 expresion 属性计算值，您应该首先将字段指示符连同它们在表达式中的数学运算符一起进行汉化。此过程的复杂性因表达式中允许的数学印象类型而异。

例如：

[fName1] + [fName2] - [fName3]    // is a simple expression
[fName1] * ([fName2] + [fName3])  // is complex than that

然后您应该通过将这些标记与数组进行比较来计算这些标记的聚合值。

--

另一种方法（如果表达式来自用户，我不推荐）是创建一个私有作用域对象，其中包含所有这些 fName 变量，并针对该上下文使用 eval 函数通过抽象。

您可以在 this 答案中了解此方法。

Answer 2

我写了一个fiddle来解决你的问题。它可以改进，但我现在没有时间。你可以自己做。

根据您发布的型号：

  $scope.item = [
    {fieldName: "fname1", value: 2},
    {fieldName: "fname2", value: 5},
    {fieldName: "fname3", value: 4},
    {fieldName: "fname4", value: 6},
    {fieldName: "fname5", value: 3},
    {fieldName: "subTotal1", expression: "['fname1'] + ['fname2'] +['fname3'] +['fname4'] +['fname5'] +"}
  ]

为了使绑定生效，您可以将所有内容放在一个函数中，该函数在属性更改时重新计算。

看看HERE

Answer 3

天呐！我做到了！看:)

当然，这个方案并不完美。这取决于控制器中使用的变量名称。但它有效！

jsfiddle.

上的实例

<form name="ExampleForm" id="ExampleForm">
  <div ng-repeat="item in items">
    <div ng-if="item.fieldName!='subTotal1'">
      <input ng-model="item.value">
      <my-ng-model n-name="{{item.fieldName}}" n-value="item.value" obj="obj"></my-ng-model>
    </div>
    <div ng-if="item.fieldName=='subTotal1'">
      {{item.expression }}={{$eval(item.expression)}}
    </div>
  </div>
  {{obj|json}}
</form>

和 js 控制器：

.controller('ExampleController', function($scope, $parse) {
$scope.obj = {};
$scope.items = [{
  fieldName: "fname1",
  value: 2
}, {
  fieldName: "fname2",
  value: 5
}, {
  fieldName: "fname3",
  value: 4
}, {
  fieldName: "fname4",
  value: 6
}, {
  fieldName: "fname5",
  value: 3
}, {
  fieldName: "subTotal1",
  expression: "obj.fname1 + obj.fname2 +obj.fname3 +obj.fname4 +obj.fname5"
}];})

和js指令：

.directive('myNgModel', function() {
var root = {
  restrict: "E",
  replace: true,
  scope: {
    nName: "@",
    nValue: "=",
    obj: "="
  },
  template: '<div></div>',
  link: function(scope) {
    scope.obj[scope.nName] = scope.nValue*1;
    scope.$watch('nValue', function(value) {
      scope.obj[scope.nName] = value*1;
    });
  }
}
return root; })

已更新

现在可以无需引用局部变量！

jsfiddle.

上的实例

<form name="ExampleForm" id="ExampleForm">
  <div ng-repeat="item in items">
    <div ng-if="item.fieldName!='subTotal1'">
      <input ng-model="item.value">
      <my-ng-model n-name="{{item.fieldName}}" n-value="item.value" obj="obj"></my-ng-model>
    </div>
  </div>
  <div ng-repeat="eval in evals">
    {{eval.expression }}={{$eval(eval.expression,obj)}}
  </div>
</form>

控制器

.controller('ExampleController', function($scope, $parse) {
$scope.obj = {};
$scope.items = [{
  fieldName: "fname1",
  value: 2
}, {
  fieldName: "fname2",
  value: 5
}, {
  fieldName: "fname3",
  value: 4
}, {
  fieldName: "fname4",
  value: 6
}, {
  fieldName: "fname5",
  value: 3
}, {
  fieldName: "subTotal1",
  expression: "fname1 + fname2 +fname3 +fname4 +fname5"
}];
$scope.evals = [];
angular.forEach($scope.items, function(item) {
  if (item.expression) {
    $scope.evals.push({
      expression: item.expression
    });
  }
});})

和指令

.directive('myNgModel', function() {
var root = {
  restrict: "E",
  replace: true,
  scope: {
    nName: "@",
    nValue: "=",
    obj: "="
  },
  link: function(scope) {
    scope.obj[scope.nName] = scope.nValue * 1;
    scope.$watch('nValue', function(value) {
      scope.obj[scope.nName] = value * 1;
    });
  }
}
return root;})

angular 从表达式计算变量

angular computed variable from an expression

angularjs

computed-field