Question

<input type="checkbox" ng-model="formData.week[]" ng-true-value="'Tuesday'">
<input type="checkbox" ng-model="formData.week[]" ng-true-value="'Wednesday'">
<input type="checkbox" ng-model="formData.week[]" ng-true-value="'Thursday'">

我想将值存储在formData中的数组中，如何做help.how以这种格式将复选框值存储到数组中

Answer 1

您可以执行以下操作：

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
  
  $scope.formData = {}
  $scope.formData.week = [
    'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday', 'Sunday'
  ];
  
  // code to store checkbox values into array
  var chkboxes = [];
  var c = document.getElementsByTagName('input');
    for (var i = 0; i < c.length; i++) {
        if (c[i].type == 'checkbox') {
            chkboxes.push(angular.element(c[i]).attr('ng-true-value'));
        }
    }
  console.log(chkboxes);
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <input type="checkbox" ng-model="formData.week[1]" ng-true-value="Tuesday">
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="Wednesday">
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="Thursday">
</div>

＆＃13;

Answer 2

您可以使用ng-click

<div ng-repeat = "day in days">
     <input type="checkbox" value={{day}} ng-click="toggleItems(day);">{{day}}
</div>

并在控制器中

$scope.days = ['Monday','Tuesday',...];
$scope.formData = {week: []};
$scope.toggleItems= function(day){
   var index = $scope.formData.week.indexOf(day);
    if(index == -1) $scope.formData.week.push(day);
    else $scope.formData.week.splice(index, 1);
}

Answer 3

HTML：

 <div ng-repeat="day in formData.week">
      <input type="checkbox" ng-model="day.value" for="day.name" />
      <span>{{day.name}}</span>
 </div>

在页面加载时初始化你的星期数组。

JS：

  $scope.formData = {
    week: [{
      name: "Monday",
      value: false
    },    {
      name: "Tuesday",
      value: false
    },{
      name: "Wednesday",
      value: false
    },{
      name: "Thursday",
      value: false
    },{
      name: "Friday",
      value: false
    },{
      name: "Saturday",
      value: false
    },{
      name: "Sunday",
      value: false
    }]
  };

Answer 4

<强> HTML

<label ng-repeat="role in roles">
  <input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>

<强> JS

var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl2', function($scope) {
  $scope.roles = [
    {id: 1, text: 'guest'},
    {id: 2, text: 'user'},
    {id: 3, text: 'customer'},
    {id: 4, text: 'admin'}
  ];
  $scope.user = {
    roles: [2, 4]
  };
  $scope.checkAll = function() {
    $scope.user.roles = $scope.roles.map(function(item) { return item.id; });
  };
  $scope.uncheckAll = function() {
    $scope.user.roles = [];
  };
  $scope.checkFirst = function() {
    $scope.user.roles.splice(0, $scope.user.roles.length); 
    $scope.user.roles.push(1);
  };
});

如何在angular中将对象添加到对象内的数组？

4 个答案: