AngularJS - 如何计算的输入栏的结果同步到范围变量 [英] AngularJS - how to sync result of calculated input field to a scope variable

问题描述

我试图计算的表单域的结果同步到一个范围的变量。例如：

I'm trying to sync the result of a calculated form field into a scope variable. For example:

<div class="form-group">
  <label for="val1" class="control-label">Val 1</label>
  <input class="form-control" name="val1" type="number" ng-model="data.val1" id="val1">
</div>
<div class="form-group">
  <label for="val2" class="control-label">Val 2</label>
  <input class="form-control" name="val2" type="number" ng-model="data.val2" id="val2">
</div>
<div class="form-group">
  <label for="score" class="control-label">Score</label>
  <input class="form-control" name="score" value="{{data.val1+data.val2}}" type="text" id="score">
</div>
<br/>data: {{data}}

我如何可以同步的结果（即得分字段）插入范围变量$ scope.data.score？我曾尝试 NG-模式=data.score但打破了计算。

您可以在这里看到工作中的例子：
http://plnkr.co/edit/fc9XcyyYGtAk0aGVV35t?p=$p$pview

You can see the example in action here: http://plnkr.co/edit/fc9XcyyYGtAk0aGVV35t?p=preview

我如何获得的最后一行读数据：{VAL1：1，将val2：2，得分：3}

How do I get the last line to read data: {"val1":1,"val2":2,"score":3}?

请注意，我正在寻找一个涉及解决方案的最小的在控制器级别否code支持。例如，我知道你可以设置一个监视控制器为val1和val2中，然后更新观察者比分。这正是我想避免，如果它的角是可能的。如果不是（理论上）可能的话，我真的AP preciate为什么它不是一个解释。

Note that I'm looking for a solution that involves minimal to no code support at the controller level. For example, I know you can set up a watch in the controller for both val1 and val2 and then update the score in the watcher. This is what I wanted to avoid, if it's possible in angular at all. If it's not (theoretically) possible, I'd really appreciate an explanation of why it's not.

有一个快速的背景可能的帮助。基本上，我们有一个简单的表单生成器的应用程序，它定义了形式及其在一个XML文件中的所有领域。这里的XML会是什么样子的示例：

A quick background might help. Basically we have a simple form builder app that defines a form and all its fields in an xml file. Here's a sample of what the xml would look like:

<form name="test">
    <field name="val1" control="textbox" datatype="number">
        <label>Val 1</label>
    </field>
    <field name="val2" control="textbox" datatype="number">
        <label>Val 2</label>
    </field>
    <field name="score" control="textbox" datatype="number">
        <label>Score</label>
        <calculate>[val1]+[val2]</calculate>
    </field>    
</form>

当请求表单时，系统将需要通过所有字段拿起XML，环路，并产生一个角样式的HTML被提供给浏览器和角度处理。理想情况下，我想保持所有形式的特定逻辑（验证，显示/隐藏，计算等），仅限于HTML，并保持控制器（JS）逻辑通用于所有形式。

When a form is requested, the system will need to pick up the xml, loop through all the fields and generate an angular style html to be served to the browser and processed by angular. Ideally, I want to keep all the form specific logic (validation, show/hide, calculation etc) confined to the html, and keep the controller (js) logic generic for all forms.

唯一的解决办法我能想出是动态加载守望功能，通过这样的事情：的eval（$ $范围手表（'[data.val1，data.val2]'） ...），但正如我所说，我真的想避免这种情况，因为它只是乏味，而且感到非常狡猾：）

The only solution I can come up with is to dynamically load watcher functions, through something like this: eval("$scope.$watch('[data.val1,data.val2]')..."), but as I said, I really want to avoid this, because it's just tedious, and feels extremely dodgy :)

推荐答案

第一个肮脏的方式。

在你的情况，你可以从控制器将所有的逻辑到HTML中使用 NG-INIT 和组合 NG-变化指令。

In your case you can move all logic from controller into html with using combination of ng-init and ng-change directives.

<div class="form-group">
  <label for="val1" class="control-label">Val 1</label>
  <input class="form-control" name="val1" type="number" ng-model="data.val1" ng-change="data.score = data.val1 + data.val2" id="val1">
</div>
<div class="form-group">
  <label for="val2" class="control-label">Val 2</label>
  <input class="form-control" name="val2" type="number" ng-model="data.val2" ng-change="data.score = data.val1 + data.val2" id="val2">
</div>
<div class="form-group" ng-init="data.score = data.val1 + data.val2">
  <label for="score" class="control-label">Score</label>
  <input class="form-control" name="score" ng-model="data.score" type="text" id="score">
</div>
<br/>data: {{data}}

我不认为这是最明显的解决方案，但您可以留下您的控制器不与任何更改。

I don't think that it's the clearest solution, but you can leave your controller without any changes with it.

演示上plunker。

第二个肮脏的方式。

还有一个办法，但是现在你不需要 NG-INIT 和 NG-变化指令。您可以在HTML中添加只是一个肮脏的前pression：

There is one more way, but now you don't need ng-init and ng-change directives. You can add just one dirty expression in html:

<div id="main-container" class="container" style="width:100%" ng-controller="MainController">
{{data.score = data.val1 + data.val2;""}} <!-- key point -->
<div class="form-group">
  <label for="val1" class="control-label">Val 1</label>
  <input class="form-control" name="val1" type="number" ng-model="data.val1" id="val1">
</div>
<div class="form-group">
  <label for="val2" class="control-label">Val 2</label>
  <input class="form-control" name="val2" type="number" ng-model="data.val2" id="val2">
</div>
<div class="form-group">
  <label for="score" class="control-label">Score</label>
  <input class="form-control" name="score" ng-model="data.score" type="text" id="score">
</div>
<br/>data: {{data}}

;。在EX pression停止角前pression的评估中的HTML文本

;"" in expression stops evaluating of angular expression to text in html.

演示上plunker。

这篇关于AngularJS - 如何计算的输入栏的结果同步到范围变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！