CODEWITHSUNDEEP
htmlangularjs
Daniel Breen
Daniel Breen

Reputation: 179

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

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.

Upvotes: 0

Views: 1012

Answers (2)

David says Reinstate Monica
David says Reinstate Monica

Reputation: 20139

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.

Upvotes: 0

Ali Adravi
Ali Adravi

Reputation: 22833

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"

Upvotes: 1

Related Questions