使用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形成動態輸入文件夾陣列

回答

相關問題