使用angularjs

时间:2017-05-31 21:11:43

标签: javascript php angularjs checkbox

我正在制作员工出勤系统,我需要知道他们的出勤状态。我正在生成一个动态表单,其中包含一个文本输入字段和每个员工的复选框,使用表格内的angularjs ng-repeat来了解是否员工是否存在以及评论。我想使用单个保存按钮保存这些动态文本的值和复选框。文本字段可能包含空值或任何其他值,复选框可能是all checked,{ {1}}以及all uncheckedfew checked。如果选中该复选框,则我要保存few unchecked,否则为no.I还有一个日期输入字段,用于保存此特定日期的记录。

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

我期望的数组格式为:

"checked":"yes"

我会将输入详细信息存储在架构所在的考勤表中 出勤率[{"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




    
});

1 个答案:

答案 0 :(得分: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>

<强> JS

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);