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

时间:2016-09-22 11:55:07

标签: javascript html angularjs

我想获取数据并将其显示在表格上,然后修改"可用性"并通过形成一个对象数组再次将其发布到服务器。现在,我正在这样做的方式,我能够获得数据,但它没有修改。

<!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>

2 个答案:

答案 0 :(得分:0)

你需要一个发布的功能,你最好在服务中创建它。确保注入$ 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);
})

答案 1 :(得分:0)

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

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

它应该有用。