How do I send user inputs (HTML) to an array in Angular? - html

Question

How do I get the inputs from this form to go into an array in angular?
<form>
<tr>
<td class="Meal-form">
<input type="date" ng-model="date" placeholder="select" required></td>
<td>
<select ng-model="meal" ng-options="meals.name for meals in mealTypes">
<option value="" disabled selected>Select</option>
</select>
</td>
<td><input type="text" ng-model="about" placeholder="What did you eat" required></td>
<td>
<select ng-model= "feel" ng-options="feeling.name for feeling in feels">
<option value="" disabled selected>Select</option>
</select>
</td>
<td><input type="submit" id="submit" value="Submit Content"></td>
</tr>
</form>
I get how to pull the information from angular to HTML, but not how to get the HTML to angular.

Answer 1

You need to create your model in controller, and save function
$scope.model = {
date: '',
meal: '',
about:'',
feel: ''
};
$scope.save = function()
{
alert($scope.model.date);
alert($scope.model.meal);
$scope.yourarray.push($scope.model);
}
You Html need to change
<form>
<tr>
<td class="Meal-form">
<input type="date" ng-model="model.date" placeholder="select" required></td>
<td>
<select ng-model="model.meal" ng-options="meals.name for meals in mealTypes">
<option value="" disabled selected>Select</option>
</select>
</td>
<td><input type="text" ng-model="model.about" placeholder="What did you eat" required></td>
<td>
<select ng-model= "model.feel" ng-options="feeling.name for feeling in feels">
<option value="" disabled selected>Select</option>
</select>
</td>
<td><input type="buttton" ng-click="save()" id="submit" value="Submit Content"></td>
</tr>
</form>
Note the ng-bind, it should be like this ng-model="model.date"

Answer 2

Using ng-model you create a dual-binding relationship between your view (the HTML) and your model (the JS). That is to say when the user types in to your form, you can then do
console.log($scope.date)
to print the date they entered.