gpt4 book ai didi

javascript - 使用 ngChange 更新模型时遇到问题

转载 作者:行者123 更新时间:2023-11-28 15:22:33 25 4
gpt4 key购买 nike

我刚刚开始学习 Angular 的基础知识。我正在尝试制作年薪转换器,只是为了好玩。当用户更改年度模型时,我的每月 ng-model 更新遇到困难。这些字段是输入标签。这是代码

    <!doctype html>
<html ng-app="salaryApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="converter">
<h1>Salary converter</h1>
<div class="form-group">
<label>Annual Salary</label>
<input type="number" class="form-control" placeholder="0" ng-model="yearly" ng-change="reCalculate()" >
<br>
<label>Monthly Salary</label>
<input type="number" class="form-control" placeholder="0" ng-model="monthly" disabled>
</div>

</div>
<!--<div ng-controller="converter">
Write some text in textbox:
<input type="text">

<h1>Hello {{ yearly }}</h1>
<h1>Hello {{ monthly }}</h1>
</div>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<!--<script src="salaryConverter.js"></script>-->
<script type="text/javascript">
var app = angular.module('salaryApp', []);



app.controller('converter', function($scope) {
$scope.yearly = 80000;
console.log("log1");
$scope.monthly = $scope.yearly / 12;
console.log("log2");

function reCalculate() {
console.log("function was run");
return $scope.yearly /12.00;

}

});
</script>

</body>
</html>

这是 plnkr http://plnkr.co/edit/26y0JRR7iVcrLOBlm7D2?p=preview

最佳答案

您需要将其用作scope属性。这里:

function reCalculate() {
console.log("function was run");
return $scope.yearly /12.00;

}

应该是

  $scope.reCalculate = function () {
console.log("function was run");
$scope.monthly=$scope.yearly /12.00;//Don't return, you neet to assign

}

关于javascript - 使用 ngChange 更新模型时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30642395/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com