Question

我正在尝试基于AngularJS制作一些货币兑换系统SPA。

应该有几个输入从json（使用ng-repeat）获取货币数据，并根据有效输入值转换货币汇率。

{
    "currencies": [
            {
                "name":"EUR", 
                "rate": 1,
                "active": "no"
            },{
                "name": "PLN",
                "rate": 4.1028,
                "active": "no"
            }, {
                "name": "USD",
                "rate": 1.1239,
                "active": "no"
            }
        ]
}

<div ng-repeat='cur in main.currencies'>
        <label>{{cur.name}}</label>
        <input type="number" min="0" 
            ng-model="cur.result" 
            ng-init='cur.result = ""'
            ng-click='main.clear();'
            ng-focus='main.active = cur; cur.active = true';
            ng-blur='cur.active = false';
        >
</div>

如何在有效（聚焦）输入上输入1值并在其他输入上获得计算值。我是AngularJS的新手，想通过实践练习来学习它。

其他值应遵循以下逻辑：cur.value = main.active.value / main.active.rate * cur.rate。

但如果我尝试而不是ng-model="cur.result"：

ng-model="cur.result = main.active ? cur.result : cur.result/main.active.rate*cur.rate"

我无法在输入中写任何内容

也许我在输入属性中遗漏了一些ng*...，但据我所知，如果我使用ng-model，我不应该使用ng-name和ng-value ...

Answer 1

试试这个JS：

angular.module('app',[]);
angular.module('app').controller('RateCtrl', RateCtrl);
function RateCtrl($scope){
    var vm = $scope;
    vm.cur = {};
    vm.currencies = {/* your object */}
    vm.setRate = function(model, rate){
      return // your javascript 
    }
}

HTML

<div ng-controller="RateCtrl as main">
    <div ng-repeat="currency in main.currencies">
        <label>{{currency.name}}</label>
        <!-- Fyi, we are in an ng-repeat so there is an isolated scope. Sometimes '$parent.' must come before the objects outside ng-repeat -->
        <input ng-model="main.cur.result" ng-focus="main.setRate(main.cur.result, currency.rate)">
    </div>
</div>

这是操纵ng-model对象的一种非常基本的方法。替代方案包括使用Angular的过滤器，观察者或装饰器。

AngularJS如何获取和编辑与其他输入值

1 个答案: