Question

以下是我的问题的当前示例：http://jsfiddle.net/JSce5/3/

我正在尝试接受视图中输入字段的数字，然后将值传递给控制器，运行计算，然后将新值作为新变量名返回给视图。我是AngularJS的新手，我还在努力弄清楚如何在这里做基础知识。任何帮助或见解将非常感激。谢谢！

<div ng-controller="MainCtrl">

Amount: <input type="number" ng-init="amountone=28" ng-model="amountone"> Value: <input type="number" ng-init="valueone=300" ng-model="valueone">
<br />
Amount: <input type="number" ng-init="amounttwo=3.5" ng-model="amounttwo"> Value: <input type="number" ng-init="valuetwo=50" ng-model="valuetwo">
<br /><br />
=========================
<br /><br />
Test ratio: {{ amountone }}/{{ amounttwo}} = {{ ratioone }}<br />
Test ratio: {{ amounttwo }}/{{ amountone}} = {{ ratiotwo }}<br />
</div>

====

'use strict';

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
    console.log($scope);
    $scope.ratioone = $scope.amountone / $scope.amounttwo;
    $scope.ratiotwo = $scope.amounttwo / $scope.amountone;

});

Answer 1

使用函数进行计算并返回结果，然后实际绑定该函数。返回值将用于绑定。

$scope.ratioone = function() {
  return $scope.amountone / $scope.amounttwo;
};

<强> HTML：

Test ratio: {{ amountone }}/{{ amounttwo}} = {{ ratioone() }}

<强> Live demo (click).

另请注意，<br>不应用于布局中的间距。它仅用于文本中的换行符，如：

<p>This is some text.<br>And this is some more text.</p>

对于布局间距，请应用margin，padding和display: block等CSS规则。

Answer 2

不是使用函数来计算@ m59建议，而是在事情发生变化时简单地使用观察者更新计算可能更有效：

'use strict';

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
    $scope.$watch('amountone + amounttwo', function() {
        $scope.ratioone = $scope.amountone / $scope.amounttwo;
        $scope.ratiotwo = $scope.amounttwo / $scope.amountone;
    });
});

将此值放在$ watch中而不是将其设为函数意味着只有在实际更改amountone或amounttwo的值时才会进行计算。在另一个示例中，每次需要检查范围更改时都会发生这种情况。

虽然在这种情况下可能会考虑过度工程，但它不会增加复杂性并且有助于提高可读性。

这种方法也是很好的做法，因为它有助于保持向前兼容性。例如，有人可能会在3个月内将其重构为指令，以便将其投入到记录网格中。每个项目都可以拥有自己的rationone和ratiotwo。如果您的网格中有1000个项目，那么您可能只保存了数千个不必要的计算。这只是一个例子，这些事情一直在发生。

ng-controller ng-model和$ scope如何在各处使用angularjs变量

2 个答案: