Binding data from a ng-repeat


#1

Hi,

I’m facing an error with a form validation that is not reconized and i do not understand why.

Concerning part is my form “newpassengerForm”

Here is my template :

<

div ng-controller="CarsListCtrl"> <!-- utilise le controler pour aller chercher les voitures en base -->
			<div layout="row" layout-wrap> <!-- wrap fait un retour auto quand 100% de l'espace est prit sur la ligne-->
				<div ng-repeat="car in cars">
				  	<div flex layout-margin> 
				  		<!-- cré les éléments de ma grilles -->
				  			<md-whiteframe class="md-whiteframe-z2" layout>
				  				<md-content>
							  		<md-toolbar class="md-warn" style="width: 300px;width-max:300px;" >
										<div class="md-toolbar-tools">
											<div layout="row" layout-align="start center">

											<md-icon md-svg-icon="maps:ic_directions_car_24px"></md-icon>
												<h3>{{car.carname}}</h3>
											
												

											</div>
											
											<span flex></span>
											
												<md-button class="md-icon-button" aria-label="Edit car" href="/organizer/editcar/{{car._id}}">
												<md-icon md-svg-icon="image:ic_edit_24px"></md-icon>
												</md-button>
											
										</div>
									</md-toolbar>


									<md-list-item ng-style="{'background-color':'#F1F1FF'}">
													
										<div layout-fill class="md-list-item-text">	
											<h6><span style="color:blue"></span><span style="font-size:10pt">{{ car.startdate | date:'EEE d MMM' }}</span><span style="color:blue"> at </span><span style="font-size:10pt">{{ car.hour }}:{{ car.minutes }}</span> </h6>	
											<h6><span style="color:blue">Start from</span> : <span style="font-size:10pt">{{ car.startaddress }}</span> </h6>
										</div>
									</md-list-item>

									
									<md-divider></md-divider>

									
								
									<md-list-item ng-repeat="user in users | filter:{carid: car._id}">
										<md-icon md-svg-icon="social:ic_person_24px" alt="{{user.username}}"></md-icon>
										
											<p>{{ user.username }}</p>

									</md-list-item>

									<md-list-item ng-repeat="seat in availableSeats(car._id, car.seats) track by $index">
										<span ng-hide="goAdd" layout="column" layout-fill layout-align="center center" layout-padding ng-style="{'background-color':'#C3FDB8'}">
											<md-button md-no-ink layout-fill class="md-primary" name="add" 
											 ng-click="goAdd=true" arialabel="Click to add a passenger">
											<md-icon md-svg-icon="social:ic_person_add_24px"></md-icon> Add passenger
											</md-button>
										</span>

										<span  ng-show="goAdd" layout-fill layout="column">
										<div layout="row">
											<form name="newpassengerForm" 
											ng-submit="addPassenger(newPassenger, car._id)" style="width:70%" 
											layout-fill layout-align="start center" novalidate>
												<md-input-container >
										          <label>Passenger name</label>  
										          <input ng-model="newPassenger.username" required>
										         </md-input-container>
										        
													
											</form>
											 <div layout="column" style="width:30%"  layout-fill>
											         <md-button md-no-ink class="md-primary" ng-click="addPassenger(newPassenger, car._id)" aria-label="add" layout-fill layout-padding>
														<md-icon md-svg-icon="navigation:ic_check_24px"></md-icon>
													</md-button>
													<md-button md-no-ink ng-click="goAdd=false" aria-label="cancel" layout-fill>
														<md-icon md-svg-icon="navigation:ic_close_24px"></md-icon>
													</md-button>
											</div>
										</div>

										</span>
										
											
									</md-list-item>
										


								</md-content>

							</md-whiteframe>	

					</div>

				</div>

			</div>
				
		</div>

here is my controler :

angular.module('caroster').controller('CarsListCtrl', ['$scope','$stateParams', '$meteor', '$state', '$rootScope',
  function ($scope, $stateParams, $meteor, $state, $rootScope) {

  	$scope.data={};
    $scope.cars = $meteor.collection(Cars).subscribe('allCars');

  	$scope.users = $meteor.collection(Users).subscribe('usersByCar');

  	//check if form is valide to be sent if yes save the passenger in the car and go back to organizer
   $scope.addPassenger = function (user, carId) {
    if ($scope.newpassengerForm.$valid){
      	user.carid=carId;
        user.createdAt=new Date();
        $scope.users.push(user);
        $scope.newPassenger='';
        $scope.goAdd=false;
      }  
    };

  	
  	$scope.occupiedSeats = function(carId) {
 		return Users.find({carid: carId}).count();
 	};

//Create an array for each seat available, so we can use ng-repeat + track by $index to display the list of seats
 	$scope.availableSeats = function(carid,seats) {
 		return new Array(seats-$scope.occupiedSeats(carid));
 	};



  }]);

Thanks a lot in advance for any help !


#2

Well I figured out why it didn’t work, it is because there is the autosave activated.

So now I’m trying to bind data from the ng-repeat :

but this doesn’t work :

$scope.userToEdit = $meteor.object(Users, new Mongo.ObjectID ($scope.user), false);

I’m trying to figure it out, but for the moment I’m a bit stuck.

So you are welcome if anybody can share knowledge.