Angularjs 表单处理答案

【问题标题】：Angularjs Form ProcessingAngularjs 表单处理
【发布时间】：2017-02-10 05:25:56
【问题描述】：

我正在尝试处理表单中提交的数据对象，但我被卡住了。我在这个网站上做了一些研究，花了几个小时阅读，但我没有得到任何答案。我可以毫无问题地获取表单数据，问题是客户在两个或多个酒店登记客人时。在 pre 标签中，它将显示 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

，我试过嵌套

    ng-repeat with 

    y in x.hotel_name

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

【问题讨论】：

标签： angularjs json ng-repeat

【解决方案1】：

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 值，而不是所选项目的值。

【讨论】：

嗨 Ashwin，这在这种情况下不起作用。起初我只是使用 ng-model="lodgingRegistration.[x.hotel_name]" 返回酒店名称但没有密钥，因此我无法将其推送到现有的 JSON 文件中。也许我可以使用 foreach 来识别选择的任何酒店，如果它与酒店列表中的名称匹配，然后将它/它们分配给键“hotel_name”
@JakeProtaTECH 我已经根据我对问题的理解更新了解决方案。
@/ashwin-lagji 非常感谢您的努力和解释，这是一个很大的帮助！

【解决方案2】：

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

Object.property

或

Object["property"]

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

【讨论】：