使用angularjs形成动态输入文件夹阵列

我正在一个员工考勤系统上工作，我需要知道他们的出勤状态。我正在生成一个动态表单，其中包含一个文本输入字段和一个使用angularjs ng的每个员工的复选框 - 重复一个表，以知道员工是否出现在评论中。我想使用一个保存按钮保存这些动态文本字段和复选框的值。文本字段可能具有空值或任何其他值和复选框可能是all checked,all unchecked和few checked和few unchecked。如果复选框被选中，那么我想要另存为"checked":"yes"否。我也有一个日期输入字段来保存此特定日期的记录。使用angularjs形成动态输入文件夹阵列

我认为我的情况的解决方案是从输入形成一个动态数组并将其分配给一个变量，但不知道如何在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; 
 
\t 
 
     $scope.dname= $scope.list[0].dname; 
 
\t $scope.sp_name= $scope.list[0].supervisor; 
 
\t 
 

 

 
    $scope.selectedText = 'Select All'; 
 
    \t $scope.isAll = false; \t \t \t \t 
 
    \t $scope.selectAll = function() { 
 
     
 
      if($scope.isAll === false) { 
 
    \t \t angular.forEach($scope.list, function(data){ 
 
       \t data.checked = true; 
 
    \t \t }); 
 
     $scope.isAll = true; \t 
 
     $scope.selectedText = 'Deselect All'; 
 
     } else { 
 
     angular.forEach($scope.list, function(data){ 
 
       \t data.checked = false; 
 
    \t \t }); 
 
     $scope.isAll = false; \t 
 
     $scope.selectedText = 'Select All'; 
 
     } 
 
    \t }; 
 
     
 
     $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> 
 
    \t <th>Employee ID</th> 
 
    \t <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>

来源

2017-05-31 query

你是否保存这些数据到MySQL？ – VK321

但问题是什么？从前端开始编写所有的逻辑，并结束到数据库中的商店？ – quirimmo

我只想形成所有这些输入的数组，而不是从PHP页面捕获它。问题是我怎么能在角度js中形成数组，以及如何在PHP中访问这些变量，其余的我知道如何处理它在PHP页面！ – query

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

来源

2017-06-02 09:02:40 VK321

我认为我们几乎接近解决方案，除了一个问题。如果你看看我的代码片段，你会看到表中有一个日期选择器。我需要将该日期选择器的值发送到同一个数组中。任何想法如何实现？ – query

其简单只是添加...... ng-model =“employee.date”> – VK321

由于日期选取器不在ng-repeat的旁边工作！ – query

使用angularjs形成动态输入文件夹阵列

回答

相关问题