使用ngChange更新模型时遇到问题
Having trouble using ngChange to update model
我刚刚开始学习Angular的基础知识。我正试着做一个年薪转换器,只是为了好玩。当用户更改年度模型时,我在每月更新ng模型时遇到了困难。字段是输入标记。这是代码
<!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>
这是plnkrhttp://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
}
将函数定义为从视图调用的$scope
,并将值分配给monthly
,而不是返回。
$scope.reCalculate = function () {
console.log("function was run");
$scope.monthly = $scope.yearly / 12.00;
}
演示
您需要将reCalculate方法添加到您的作用域:
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;
}
});
你也可以直接添加:
$scope.reCalculate = function()...
但我建议遵循一些关于如何编写控制器的风格指南:https://github.com/johnpapa/angular-styleguide
app.controller('converter', function($scope) {
$scope.yearly = 80000;
console.log("log1");
$scope.monthly = $scope.yearly / 12;
console.log("log2");
$scope.reCalculate = function () {
console.log("function was run");
$scope.monthly = $scope.yearly / 12;
}
});
这是你的plunker工作
相关文章:
- 将PHP变量传递给jQuery时遇到问题
- 将jQuery转换为用户脚本的普通Javascript时遇到问题
- 将子文档推送到父数组时遇到问题
- JQuery FullCalendar在从ajax成功调用rerenderEvents时遇到问题
- 在将javascript附加到我的html中时遇到问题
- 为什么我在以编程方式打开窗口时遇到问题
- 在将缩略图链接到模态时遇到问题
- 使用 ng 模型获取数据时遇到问题
- 是否有其他人在设计Twitter Typeahead时遇到问题'的搜索栏
- 使用jquery进行整数比较时遇到问题
- 使用PhantomJS下载动态web内容时遇到问题
- 设置RequireJS时遇到问题
- 让Javascript在SharePoint 2010上运行时遇到问题
- I'我在react.js中编写for循环时遇到问题
- 通过jQuery获取上传的文件名时遇到问题
- 我在启动我的节点时遇到问题.js IRC 机器人
- Ruby on Rails 4:在 Rails Web 应用程序中添加 Javascript 文件时遇到问题
- 从谷歌地图自定义控件打开离子模态时遇到问题
- 在使用 YAML 和 Google App Engine 时遇到问题
- 在 Chrome 扩展程序中将鼠标悬停在广告上使用时遇到问题