Angularjs 表单处理

Question

我正在尝试处理从表单提交的数据对象，但我被卡住了。我在这个网站上做了一些研究，花了几个小时阅读，但我没有得到任何答案。我可以毫无问题地获取表格数据，问题是当客户在两家或更多酒店登记客人时。在前置标签中，它将显示 hotel_name:{"hotelx", "hotely"}。我想将其作为 JSON 存储在我的住宿文件中，但是当我的控制器接收到表单数据对象时，如何进入它并获得我需要的东西，以便我可以将它推送到文件中？

    <div class=" col-md-12">
        <div class="md-form">
            <input type="text" id="Not_Listed" class="form-control" ng-model="lodgingRegistration.not_listed" placeholder="Enter hotel name if not listed below">
            <label for="Not_Listed"></label>
        </div>
         <div class="md-form col-md-6"  ng-repeat="x in lodging">
            <input type="checkbox" id="{{x.hotel_name}}" 
                ng-model="lodgingRegistration.hotel_name[x.hotel_name]">
            <label for="{{x.hotel_name}}">{{x.hotel_name}}</label>
        </div>
    </div>

    <div class="text-center">
        <button class="btn btn-deep-purple" ng-  click="register(lodgingRegistration)">Submit</button>
    </div>
          <h3>Captured Form Data:</h3>
      <pre>{{lodgingRegistration | json}}</pre>

这是我的控制器代码

      $scope.register = function(lodgingRegistration){
    //       something must go here to break into the object/array before I  push?
    $scope.registered.push(lodgingRegistration);
        console.log(lodgingRegistration);
        }

这是我的展示，大部分工作，但我也无法访问文件中的虚拟数据，这是一个 hotel_name

的数组

    <tbody>
     <tr ng-repeat="x in registered | filter:SearchHotel"

        <th scope="row">{{$index +1}}</th>
        <td>{{x.event_name}}</td>
        <td>{{x.team_name}}</td>
        <td>{{x.sport}}</td>
        <td>{{x.hotel_name}}</td>

     </tr>
    </tbody>

我知道我需要更改访问

的方式

    x.hotel_name

，我试过 nest

    ng-repeat with 

    y in x.hotel_name

但是没有用。我想使用 Firebase 将其存储为 JSON，但如果我不能，我将不得不返回 PHP，我真的不想这样做，非常感谢任何帮助.

Answer 1

您的控制器中有 json 对象 lodgingRegistration 这样你就可以得到任何你想要的数据，

Object.property

或

Object["property"]

通过ajax请求（angular的$http服务）传递给后端存储。

Answer 2

angular
    .module('app', []).controller('MyController', ['$scope',
  function($scope) {
    $scope.lodgingRegistration = {};
    $scope.registered = {};
    $scope.registered.hotel_name = [];
    $scope.lodging = [{
      hotel_name: 'hotelA'
    }, {
      hotel_name: 'hotelB'
    }, {
      hotel_name: 'hotelC'
    }, {
      hotel_name: 'hotelD'
    }];
    $scope.register = function(lodgingRegistration) {

      for (x in $scope.lodging) {
        if ($scope.lodging[x].checked == true) {
          $scope.registered.hotel_name.push($scope.lodging[x].hotel_name);
        }
      }
      if (lodgingRegistration.not_listed != undefined && lodgingRegistration.not_listed != null) {
        $scope.registered.hotel_name.push(lodgingRegistration.not_listed);
      }
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='app'>
  <div ng-controller='MyController'>
    <div class=" col-md-12">
      <div class="md-form">
        <input type="text" id="Not_Listed" class="form-control" ng-model="lodgingRegistration.not_listed" placeholder="Enter hotel name if not listed below">
        <label for="Not_Listed"></label>
      </div>
      <div class="md-form col-md-6" ng-repeat="x in lodging">
        <input type="checkbox" id="{{x.hotel_name}}" ng-model="x.checked">
        <label for="{{x.hotel_name}}">{{x.hotel_name}}</label>
      </div>
    </div>

    <div class="text-center">
      <button class="btn btn-deep-purple" ng-click="register(lodgingRegistration )">Submit</button>
    </div>
    <h3>Captured Form Data:</h3>
    <pre>{{lodgingRegistration | json}}</pre>

     <table>
        <tbody>
            <tr ng-repeat="x in registered.hotel_name track by $index" >
                <th scope="row">{{$index +1}}</th>
                <td>{{x}}</td>
            </tr>
        </tbody>
    </table>
    </div>
</body>

已编辑

我已经更新了控制器和 Html 并开始工作。所选酒店存储在registered.hotel_name

控制器：

$scope.lodgingRegistration = {};
$scope.registered = {};
$scope.registered.hotel_name = [];
$scope.lodging = [{
    hotel_name: 'hotelA'
}, {
    hotel_name: 'hotelB'
}, {
    hotel_name: 'hotelC'
}, {
    hotel_name: 'hotelD'
}];
$scope.register = function (lodgingRegistration) {

    for (x in $scope.lodging) {
        if ($scope.lodging[x].checked == true) {
            $scope.registered.hotel_name.push($scope.lodging[x].hotel_name);
        }
    }
    if (lodgingRegistration.not_listed != undefined && lodgingRegistration.not_listed != null) {
        $scope.registered.hotel_name.push(lodgingRegistration.not_listed);
    }
}

HTML:

<div class=" col-md-12">
        <div class="md-form">
            <input type="text" id="Not_Listed" class="form-control" ng-model="lodgingRegistration.not_listed" placeholder="Enter hotel name if not listed below">
            <label for="Not_Listed"></label>
        </div>
        <div class="md-form col-md-6" ng-repeat="x in lodging">
            <input type="checkbox" id="{{x.hotel_name}}" ng-model="x.checked">
            <label for="{{x.hotel_name}}">{{x.hotel_name}}</label>
        </div>
    </div>

    <div class="text-center">
        <button class="btn btn-deep-purple" ng-click="register(lodgingRegistration )">Submit</button>
    </div>
    <h3>Captured Form Data:</h3>
    <pre>{{lodgingRegistration | json}}</pre>


     <table>
    <tbody>
        <tr ng-repeat="x in registered.hotel_name track by $index" >
            <th scope="row">{{$index +1}}</th>
            <td>{{x}}</td>
        </tr>
    </tbody>
</table>

需要考虑的要点：

复选框的 ng-model 分配 true 或 false 值，而不是所选项目的值。

Angularjs 表单处理

Angularjs Form Processing

json

angularjs

ng-repeat