AngularJS实现Checkbox自定义值录入及展示功能技术问询

嘿，我来帮你扩展这个AngularJS的功能！结合你现有的文本框增删逻辑，我们可以通过以下步骤实现动态复选框的数值录入与求和功能：

1. 调整HTML结构 #

在现有页面基础上，新增一个专门用于动态复选框的区域，包含动态渲染的复选框+数值输入组、操作按钮和结果展示区：

<div ng-app="myApp" ng-controller="myCtrl">
    <!-- 原有的文本框管理区域 -->
    <h3>文本框管理</h3>
    <div ng-repeat="item in textboxes track by $index">
        <input type="text" placeholder="输入内容">
    </div>
    <button ng-click="appendTextbox()">append</button>
    <button ng-click="removeTextbox()">remove</button>

    <!-- 新增的数值运算区域 -->
    <h3>数值运算区</h3>
    <div ng-repeat="numItem in numberItems track by $index">
        <input type="checkbox" ng-model="numItem.checked">
        <input type="number" ng-model="numItem.value" placeholder="输入数值">
    </div>
    <button ng-click="addNumberItem()">添加复选框项</button>
    <button ng-click="removeLastNumberItem()">移除最后一项</button>
    <button ng-click="calculateSum()">计算求和</button>
    <p>求和结果：{{sumResult}}</p>
</div>

2. 完善AngularJS控制器逻辑 #

在原有的控制器中，新增维护复选框项的数组，以及对应的增删、运算方法：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    // 原有的文本框增删逻辑
    $scope.textboxes = [{}]; // 默认显示1个文本框
    $scope.appendTextbox = function() {
        $scope.textboxes.push({});
    };
    $scope.removeTextbox = function() {
        if ($scope.textboxes.length > 1) {
            $scope.textboxes.pop();
        }
    };

    // 新增的复选框数值逻辑
    // 初始化默认添加4个复选框项，符合你的需求
    $scope.numberItems = [];
    for(let i=0; i<4; i++){
        $scope.numberItems.push({checked: false, value: 0});
    }

    // 添加新的复选框项
    $scope.addNumberItem = function() {
        $scope.numberItems.push({checked: false, value: 0});
    };

    // 移除最后一个复选框项
    $scope.removeLastNumberItem = function() {
        if ($scope.numberItems.length > 0) {
            $scope.numberItems.pop();
        }
    };

    // 求和运算核心逻辑
    $scope.calculateSum = function() {
        $scope.sumResult = 0;
        // 遍历所有勾选的项，累加数值
        angular.forEach($scope.numberItems, function(item) {
            if (item.checked) {
                // 转成数字类型，避免字符串拼接，空值/非数字默认加0
                $scope.sumResult += parseInt(item.value) || 0;
            }
        });
    };
});

关键细节说明 #

• 双向数据绑定：用ng-model分别绑定复选框的选中状态和输入框的数值，确保视图和数据实时同步
• 类型处理：输入框的数值默认是字符串，用parseInt()转成数字，加上|| 0避免空值或非数字导致的运算错误
• 边界控制：移除按钮做了长度判断，防止把所有复选框项都删光（你可以根据需求调整这个限制）
• 初始配置：初始化时默认添加了4个复选框项，完全匹配你提到的需求，也可以改成让用户手动添加

这样改造后，用户就能在复选框对应的输入框录入数值，勾选需要参与运算的项，点击「计算求和」按钮后，结果会立刻展示在页面上啦！

内容的提问来源于stack exchange，提问作者imnik18