Javascript 使用ngChange更新模型时遇到问题
我刚开始学习角度的基本知识。我想做一个年薪转换器,只是为了好玩。当用户更改年度模型时,我的每月ng模型更新有困难。这些字段是输入标记。这是密码Javascript 使用ngChange更新模型时遇到问题,javascript,angularjs,angular-ngmodel,angularjs-ng-change,ng-controller,Javascript,Angularjs,Angular Ngmodel,Angularjs Ng Change,Ng Controller,我刚开始学习角度的基本知识。我想做一个年薪转换器,只是为了好玩。当用户更改年度模型时,我的每月ng模型更新有困难。这些字段是输入标记。这是密码 <!doctype html> <html ng-app="salaryApp"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="styl
<!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>
工资转换器
年薪
月薪
var app=angular.module('salaryApp',[]);
应用控制器('转换器'),功能($范围){
$scope.year=80000;
控制台日志(“日志1”);
$scope.monthly=$scope.year/12;
控制台日志(“日志2”);
函数重新计算(){
log(“函数已运行”);
返回$scope.year/12.00;
}
});
这是plnkr
您需要将其用作
范围
属性。在这里:
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
}
您需要将其用作
范围
属性。在这里:
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
}
在
$scope
中定义要从视图调用的函数,并将值分配给每月
,而不是返回
$scope.reCalculate = function () {
console.log("function was run");
$scope.monthly = $scope.yearly / 12.00;
}
定义要从视图调用的
$scope
中的函数,并将值分配给每月
,而不是返回
$scope.reCalculate = function () {
console.log("function was run");
$scope.monthly = $scope.yearly / 12.00;
}
您需要将重新计算方法添加到您的范围中:
app.controller('converter', function($scope) {
$scope.yearly = 80000;
$scope.reCalculate = reCalculate; <--- THIS LINE
console.log("log1");
$scope.monthly = $scope.yearly / 12;
console.log("log2");
function reCalculate() {
console.log("function was run");
return $scope.yearly /12.00;
}
});
但我建议遵循一些关于如何编写控制器的样式指南:
您需要将重新计算方法添加到您的范围中:
app.controller('converter', function($scope) {
$scope.yearly = 80000;
$scope.reCalculate = reCalculate; <--- THIS LINE
console.log("log1");
$scope.monthly = $scope.yearly / 12;
console.log("log2");
function reCalculate() {
console.log("function was run");
return $scope.yearly /12.00;
}
});
但我建议遵循一些关于如何编写控制器的样式指南:
这是你的作品
这是您的作品谢谢Zee!很容易!我读了很多次文档,但是没有看到具体的细节。@squid267np。很高兴能帮上忙:)谢谢Zee!很容易!我读了很多次文档,但是没有看到具体的细节。@squid267np。很乐意帮忙:)