Angular - 使用 $scope 中的数字添加输入值答案

【问题标题】：Angular - Adding an input's value with a number from $scopeAngular - 使用 $scope 中的数字添加输入值
【发布时间】：2015-09-11 07:01:58
【问题描述】：

我有以下代码：

<div data-ng-controller="MainController">
        <input class="amount" type="text" name="" value="" />
        <input class="result" type="text" name="" value=""/>
</div>

我想从 $scope 中获取一个数值，并将其添加到用户在输入中输入的带有“数量”类的数字中，并在带有“结果”类的输入中显示结果。因此，基本上，该变量在 MainController 函数中定义如下：

$scope.cost = 100;

我有点困惑最好的方法是什么，我看到有 ng-value 和 ng-model 指令可供我使用，但是我很难理解哪个适合这个应用程序（以及如何正确使用它们）。

【问题讨论】：

你应该使用ng-model="cost"，这将是双向绑定

标签： javascript angularjs angularjs-ng-model angularjs-ng-value angularjs-bindings

【解决方案1】：

似乎您的应用程序正在要求输入，他们将在那里提交值或将其存储在数据库中的某个位置。所以ng-model（双向绑定）将适合您的应用程序，这将更新model 和view 两者的值。

标记

<div data-ng-controller="MainController">
    <input class="amount" type="text" ng-model="cost"/>
</div>

上面的字段将预先填充为100，并且当您更新它时，它还将更改$scope.cost 的值以及如果它显示在任何地方的视图中的值。

不要想ng-value 这只是一种绑定方式。您可以使用 ng-value="cost" 将值分配给输入，这只会更新 input 的 value 属性，但是当您从 html 更新输入时，您将永远不会在 cost 范围变量中反映这些更改，因为 ng-value 是针对单个方式绑定。认为您应该仅在要显示值时使用 ng-value。

【讨论】：

我不希望在输入中预先填充“成本”-而是-我想采用该“成本”并将其添加到输入中输入的数字中（然后显示这个在别的地方）。所以，根据你的（真棒）解释，我想我可能真的想要 ng-value。同样，我不想更改此应用程序范围内的成本。我想查看用户想要多少商品，然后获取价格并在另一个输入中显示结果。我希望这是有道理的。
@Moose 是的..你应该使用ng-value 然后..我已经在解释中提到了这一点..
好的，所以我需要采用“成本”的 ng 值并执行以下操作：
我想你想在 html 上的某处显示用户输入的价值和成本。所以 html 将是 <input class="result" ng-model="whateverTheUserEnteredIntoTheAmountInput"/> 然后无论你想显示添加，你都可以使用这个 {{ whateverTheUserEnteredIntoTheAmountInput + cost }}基本上你需要使用两者的组合
@Moose 很高兴为您提供帮助..谢谢 :)

【解决方案2】：

你应该使用ng-model

ng-value ：它是一个用于评估表达式的指令，并且值绑定到用于评估表达式的 $scope
ng-model：有助于双向数据绑定，view-->controller，反之亦然，而且它的指令绑定 HTML 控件的值

【讨论】：