Javascript 如何从表中读取数据并形成数组并发布？_Javascript_Html_Angularjs

Javascript 如何从表中读取数据并形成数组并发布？

javascript html angularjs

Javascript 如何从表中读取数据并形成数组并发布？,javascript,html,angularjs,Javascript,Html,Angularjs,我希望获取数据并将其显示在表上，然后修改“可用性”，并通过形成一个对象数组再次将其发布到服务器。现在我这样做的方式，我能够得到数据，但它不是来修改 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <script src="//aj

我希望获取数据并将其显示在表上，然后修改“可用性”，并通过形成一个对象数组再次将其发布到服务器。现在我这样做的方式，我能够得到数据，但它不是来修改

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>


  <body ng-app="valueExample" ng-controller="ExampleController">
      <script>
   angular.module('valueExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
      $scope.routeDetails = 
      [
         {
            "Employee":"Employee 1",
            "date":"2016-09-25",
            "availablity":"Yes"
         },
         {
            "Employee":"Employee 2",
            "date":"2016-09-25",
            "availablity":"No"
         },
         {
            "Employee":"Employee 3",
            "date":"2016-09-25",
            "availablity":"Yes"
         },
         {
            "Employee":"Employee 4",
            "date":"2016-09-25",
            "availablity":"No"
         }
      ]
    $scope.submit = function(data) {
       console.log(data);
    }; 
     }]);
</script>
            <form>  
                <table class="table_role" >
                        <thead>
                            <tr><th>Employee Name</th>
                                <!-- <th>Date</th> -->
                                <th>Availablity</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="routeDetail in routeDetails | orderBy">
                        <tr>
                            <td>{{routeDetail.Employee}}</td>

                            <!-- <td>{{routeDetail.date}}</td> -->

                            <td>
                                <input type="checkbox" ng-checked="routeDetail.availablity == 'Yes'" />
                            </td>
                        </tr>
                        </tbody>
                    </table>    
                <button ng-click="submit(routeDetails)" type="submit">Submit</button>
            </form>
  </body>


</html>


angular.module（'valueExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.routedDetails=
[
{
“员工”：“员工1”，
“日期”：“2016-09-25”，
“可用性”：“是”
},
{
“员工”：“员工2”，
“日期”：“2016-09-25”，
“可用性”：“否”
},
{
“员工”：“员工3”，
“日期”：“2016-09-25”，
“可用性”：“是”
},
{
“员工”：“员工4”，
“日期”：“2016-09-25”，
“可用性”：“否”
}
]
$scope.submit=函数（数据）{
控制台日志（数据）；
}; 
}]);
员工姓名
有效性
{{routedeail.Employee}
提交

您需要一个函数来发布，最好在服务中创建该函数。确保注入$http

function postman(url, data) {
        var res = $http.post(url, data);
        res.success(function (data, status, headers, config) {
            console.log('success');
        });
        res.error(function (data, status, headers, config) {
            alert("failure message: " + JSON.stringify({data: data}));
        });
        return res;
    }

在控制器中，您可以这样称呼它：

Service.postman('your-url', {data: $scope.routeDetails}).then(function (results) {
   console.log(results);
})

像这样更改您的复选框逻辑

<td>
    <input type="checkbox" ng-model="routeDetail.availablity"
                   ng-true-value="'Yes'" ng-false-value="'No'"/>
</td>

它应该会起作用。

这里有一个提示：@AnujMayank欢迎