Menu
I'm trying to process the submitted data object from a form but I'm stuck. I have done some researches on this site and spent hours reading but I didn't get any answer. I can get the form data without a problem, the issue is when a customer registers guests at two or more hotels. In the pre tags it will show hotel_name:{"hotelx", "hotely"}. I want to store this as JSON in my lodging file but when my controller receives the form data object, how do break into it and get what I need, so I can push it onto the file?
<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>
Here is my controller code
$scope.register = function(lodgingRegistration){
// something must go here to break into the object/array before I push?
$scope.registered.push(lodgingRegistration);
console.log(lodgingRegistration);
}
and here is my display, most of works but I can't access the dummy data in the file either, which is an array of 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>
I know I need to change how to access the
x.hotel_name
, I tried nest
ng-repeat with
y in x.hotel_name
but it didn't work. I'd like to store this as JSON using Firebase but if I can't I'll have to go back to PHP and I really don't want to do that, any help is much appreciated.
897
asked Sep 16 '26 12:09
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>EDITED
I have Updated the controller and the Html and got this working. The selected hotels are stored in 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>
The points to consider :
185
answered Sep 19 '26 01:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With