AngularJS 勾选复选框金额四舍五入、未勾选保留小数功能实现入门咨询

前置准备 #

你需要先准备好AngularJS 1.x的开发依赖，将AngularJS脚本文件引入到你的HTML页面中即可。

步骤1：定义基础模块与控制器 #

首先完成AngularJS应用的基础结构搭建，同时定义你需要的$scope变量：

// 定义AngularJS应用模块
var app = angular.module('amountApp', []);
// 定义控制器
app.controller('AmountController', ['$scope', function($scope) {
  // 定义复选框绑定变量，默认未勾选
  $scope.checked = false;
  // 定义原始总金额，可替换为你的业务动态计算逻辑
  $scope.originalTotal = 299.78;

  // 定义格式化金额的处理方法
  $scope.getDisplayTotal = function() {
    if ($scope.checked) {
      // 勾选状态：四舍五入取整
      return Math.round($scope.originalTotal);
    }
    // 未勾选状态：返回原始值保留原有小数位
    return $scope.originalTotal;
  }
}]);

步骤2：编写视图层代码 #

在HTML中编写页面结构，通过双向绑定关联控制器逻辑：

<!DOCTYPE html>
<html ng-app="amountApp">
<head>
  <meta charset="UTF-8">
  <title>金额格式化演示</title>
  <script src="angular.min.js"></script>
</head>
<body ng-controller="AmountController">
  <!-- 复选框与$scope.checked双向绑定 -->
  <div>
    <input type="checkbox" id="roundCheck" ng-model="checked">
    <label for="roundCheck">总金额四舍五入取整</label>
  </div>
  <!-- 显示处理后的总金额 -->
  <div>总金额：¥{{getDisplayTotal()}}</div>
</body>
</html>

$scope.checked变量的定义与使用说明 #

• 定义规则：该变量为布尔类型，只需在控制器初始化时赋值默认值即可，默认false代表未勾选，默认true代表初始状态为勾选。
• 绑定逻辑：视图层复选框通过ng-model="checked"和该变量双向绑定，你不需要额外监听勾选事件，AngularJS会自动同步变量值：勾选时变量自动变为true，取消勾选自动变为false。
• 业务调用：所有需要根据勾选状态判断的逻辑，直接读取$scope.checked的布尔值判断即可。

验证效果 #

将上述代码保存为HTML文件在浏览器打开即可测试：

• 初始状态复选框未勾选，总金额显示原始小数299.78
• 勾选复选框，总金额自动变为四舍五入后的整数300
• 取消勾选，总金额自动恢复为299.78

如果你的总金额是动态计算的（比如从商品列表求和得到），只需把$scope.originalTotal的赋值逻辑替换为你的业务求和逻辑即可，格式化规则无需修改。

内容的提问来源于stack exchange，提问作者Sai Deepak Raj