我正在尝试处理从表单提交的数据对象，但我被卡住了。我在这个网站上做了一些研究，花了几个小时阅读，但我没有得到任何答案。我可以毫无问题地获取表格数据，问题是当客户在两家或更多酒店登记客人时。在前置标签中，它将显示 hotel_name:{"hotelx", "hotely"}。我想将它作为 JSON 存储在我的住宿文件中，但是当我的 Controller 接收到表单数据对象时，如何进入它并获得我需要的东西，以便我可以将它推送到文件中？
<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>
这是我的 Controller 代码
$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，我真的不想这样做，非常感谢任何帮助。
最佳答案
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>已编辑
我已经更新了 Controller 和 Html 并使其正常工作。所选酒店存储在 registered.hotel_name
Controller :
$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 表单处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42152085/