如何添加用户在复选框内写入的值？

Question

我使用 AngularJS 编写了用于添加和删除文本框的代码，但我想添加将由用户编写的复选框的值并将其显示在同一页面上，所以我该怎么做？

下面的代码将显示 1 个文本框和 3 个按钮，如果我单击追加，它将在页面上添加一个文本框，当我单击删除时，它将删除最后一个复选框。

我想添加功能，例如，如果我附加 4 个复选框，并且每个复选框都插入一些值作为数字，然后我单击添加按钮，然后它将 return 添加我插入的值之前和 return 它在同一页上。那么我应该在代码中写什么

var app = angular.module('abc', []);
  app.controller('myCtrl', function($scope) {
  $scope.array=[1];
});

<html ng-app="abc" ng-controller="myCtrl">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <body>
    <div ng-repeat="a in array">
      Textbox {{a}} <input type="text" id="{{a}}">
    </div>
    <button ng-click="array.push(array.length+1)">Append</button> 
    <button ng-click="array.pop(array.length-1)">Remove</button> 
    <button>Add</button>
  </body>
</html>

Answer 1

您可以在作用域中创建一个 calcSum 函数，它计算输入值的总和并将总和存储在作用域中。然后你可以用 ng-click.

调用那个函数

请注意，我将您的数组更改为直接包含在文本框中输入的值。这样您就可以直接计算数组的总和，而无需手动循环输入。

var app = angular.module('abc', []);
  app.controller('myCtrl', function($scope) {
  $scope.array=[0];
  $scope.calcSum = function() {
     $scope.sum = $scope.array.reduce(function(total, num) {
        return total + num;            
     })
  }
});

<html ng-app="abc" ng-controller="myCtrl">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <body>
    <div ng-repeat="a in array track by $index">
      Textbox {{$index}} <input type="number" ng-model="array[$index]">
    </div>
    <button ng-click="array.push(0)">Append</button> 
    <button ng-click="array.pop(array.length-1)">Remove</button> 
    <button ng-click="calcSum()">Add</button>
    <div>{{sum}}</div>
  </body>
</html>

如何添加用户在复选框内写入的值？

how to add the value written inside checkbox by user?

html

angularjs

angularjs-ng-repeat