使用angularjs从动态输入字段形成一个数组答案

【问题标题】：forming an array from dynamic input fileds using angularjs使用angularjs从动态输入字段形成一个数组
【发布时间】：2017-05-31 21:11:43
【问题描述】：

我正在开发一个员工考勤系统，我需要知道他们的考勤状态。我正在生成一个动态表单，其中包含一个文本输入字段和一个复选框，用于在表格中使用 angularjs ng-repeat 来了解是否员工与 cmets 一起存在或缺席。我想使用单个保存按钮保存这些动态文本字段和复选框的值。文本字段可能有空值或任何其他值，复选框可能是 all checked,all unchecked和few checked 和few unchecked。如果复选框被选中，那么我想保存"checked":"yes" 否则为否。我还有一个日期输入字段来保存这个特定日期的记录。

我认为我的情况的解决方案是从输入形成一个动态数组并将其分配给一个变量，但不知道如何在 angularjs 中动态形成数组，然后将数组传递给 php 页面。你能帮帮我吗在这个问题上？

我预期的数组格式是：

[{"Did":"10","supervisor":"ms1001","date":"2017-06-01",
"info":
{"eid":"10","checked":"yes","cmnt":"on time"},
{"eid":"20","checked":"NO", "cmnt":"absent"},
{"eid":"30","checked":"yes","cmnt":""},
{"eid":"40","checked":"NO","cmnt":"OK"},
{"eid":"50","checked":"YES","cmnt":""},
{"eid":"60","checked":"YES","cmnt":""},
{"eid":"70","checked":"YES","cmnt":""},
{"eid":"80","checked":"NO","cmnt":"Late"},
{"eid":"90","checked":"YES","cmnt":""}
        }];

我会将输入的详细信息存储在模式所在的考勤表中出席(did,eid,date,checked,comment,supervisor_id)

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('MyCtrl', function($scope) {
    $scope.list = [
    {"dept_id":"d10","dname":"sales","supervisor":"ms1001"},
    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"},
    {"eid":"50","ename":"nam5"},

    {"eid":"60","ename":"nam6"},

    {"eid":"70","ename":"nam7"},
    {"eid":"80","ename":"nam8"},

    {"eid":"90","ename":"nam9"},

    {"eid":"120","ename":"nam10"}


    ];

        $scope.did= $scope.list[0].dept_id;
	 
        $scope.dname= $scope.list[0].dname;
	$scope.sp_name= $scope.list[0].supervisor;
	


    $scope.selectedText = 'Select All';
    	$scope.isAll = false;				
    	$scope.selectAll = function() {
        
            if($scope.isAll === false) {
    		angular.forEach($scope.list, function(data){
             	data.checked = true;
    		});
        $scope.isAll = true;	
        $scope.selectedText = 'Deselect All';
        } else {
        angular.forEach($scope.list, function(data){
             	data.checked = false;
    		});
        $scope.isAll = false;	
        $scope.selectedText = 'Select All';
        }
    	};
      
        $scope.selectedFriends = function () {
        return $filter('filter')($scope.list, {checked: true });
   
      };
  
//date picker
  
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

 
  $scope.format = 'dd-MMMM-yyyy';


//end of date picker




    
});

    <html>
    <head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>  

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <style>
      .full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
    </style>

    </head>

    <div class="container">

    <div ng-app="myApp" ng-controller="MyCtrl">

       <div class="row">
           <div class="col-sm-3" style="background-color:yellow;">
             <p>Department ID::{{did}}</p>
            </div>

           <div class="col-sm-3" style="background-color:skyblue;">
            <p>Dept  Name:{{dname}}</p>
            </div>

            <div class="col-sm-3" style="background-color:pink;">
             <p>Supervisor name name:{{sp_name}}</p>
             </div>

                    <div class="col-sm-3">
            <p class="input-group">
              <input type="text" class="form-control" uib-datepicker-popup="{{format}}" 
              ng-model="list.dt" is-open="opened" min-date="minDate" max-date="'2018-06-22'"
              ng-model-options="{timezone: 'UTC'}" 
              datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
              ng-required="true" close-text="Close" />
              <span class="input-group-btn"> 
                    <button type="button" class="btn btn-default" ng-click="open($event)">
                    <i class="glyphicon glyphicon-calendar"></i></button>
                  </span>
            </p>
           </div>
      </div>


    <table  class="table table-striped table-bordered">
        <thead>
          <tr>
    	 <th>Employee ID</th>
    	<th>name</th>
            <th><label>Attendence</label><br><span id="selectall" ng-click="selectAll()"><input 
        type="checkbox">{{selectedText}}</span></th>
    <th>comment</th>        

    </tr>  
     </thead>
        <tbody>
      
       <tr ng-repeat="data in list" ng-if="$index">
          <td> {{ data.eid }} </td>
          <td> {{ data.ename }} </td>

    <td> <input type="checkbox"  value="{{ data.eid}}"  ng-checked="data.checked" ng-model="data.checked"></td>
    <td>
    <input type="text" ng-model="data.cmnt" ></td>
     </tr>
    </tbody>
    </table>

<pre>{{list}}</pre>
    </div>

    <button type="button" ng-click="saveAll()">Save all</button>
    </div>

    </html>

【问题讨论】：

您是否将这些数据保存到 mysql 中？
但问题是什么？为您编写从前端开始到数据库中存储的所有逻辑？
我只想形成一个包含所有这些输入的数组，而不是从 php 页面中捕获它。所以问题是我如何在 angular js 中形成数组以及如何在 php 和 for 中访问这些变量其余的我知道如何在 php 页面中处理它！
是的，我想把它保存在 mysql 中，我知道怎么做。但是在 angularjs 中创建数组并从 php 页面@VK321 读取它时遇到问题
@query - 我问你是因为你的做法不正确。您可能还想优化逻辑。

标签： javascript php angularjs checkbox

【解决方案1】：

HTML

<table border="1">
 <tr>
    <td>Employee ID</td>
    <td>Name</td>
    <td>Attendance</td>
 </tr>
 <tr ng-repeat="employee in employees">
    <td>{{employee.eid}}</td>
    <td>{{employee.ename}}</td>
    <td><input type="checkbox" name="check" ng-model="employee.att">
 </td>
 </tr>
</table>

<button ng-click="saveForm()">Save all</button>
<pre>{{employees}}</pre>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $http) {

//initial data to display on table.
$scope.employees = [
 {eid:"10",ename:"nam1", att: false},
 {eid:"20",ename:"nam2", att: false},
 {eid:"30",ename:"nam3", att: false},
];

//on save
$scope.saveForm = function (){

  $http({
    method: 'POST',
    url: '/ana/testone',
    data: $.param({formData: angular.copy($scope.employees)}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  }).then(function(response) {
    console.log(response);
  });
}
});

PHP

$data = $_POST['formData'];
echo json_encode($data);

【讨论】：

我认为我们几乎接近解决方案，除了一个问题。如果您查看我的代码 sn-p，您会看到表格中有一个日期选择器。我需要在同一个数组中发送该日期选择器的值。知道如何实现吗？
无法正常工作，因为日期选择器不在 ng-repeat 范围内！
@query -
@VK321- 仍然无效！日期未显示在
标记内。我已经更新了我的代码 sn-p 请检查一下
@query - stackoverflow.com/questions/19316937/…