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

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.

$scope.journals = [ { date: '', meal: '', food: '', reaction: '' }] — Daniel Breen
– Daniel Breen, Commented Sep 17, 2015 at 19:46
make an ng-click function that when submit is clicked it creates an array and pushes $scope.date , $scope.meal, $scope.about, $scope.feel into it. — floor
– floor, Commented Sep 17, 2015 at 19:46
Anything that within html is in ng-model, is accessible in your controller via $scope.about and if for example on click of submit you want the data to be pushed into array, than just create something like $scope.addToList = function() {data = {id: 1, name : $scope.about, test: $scope.fell}; $scope.myList.push(data)}, bind this to your button via ng-click and this should work — Diana R
– Diana R, Commented Sep 17, 2015 at 19:47
Why do you want that to be an array which simply wraps one object? In any case, you can just create the object like $scope.journals = [{date: $scope.date}], or whatever — Tom
– Tom, Commented Sep 17, 2015 at 19:48

Ali Adravi · Accepted Answer · 2015-09-17 19:47:46Z

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"

don't need to declare all the properties in controller, ng-model will create them for you , simpler to just do $scope.model={}
So is this taking the inputs from the user and storing them in $scope.save or in $scope.model? The next thing I want to do is create another row on the table with the information that user has input using ng-repeat. Correct?

David says Reinstate Monica · Accepted Answer · 2015-09-17 19:49:36Z

0

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.

answered Sep 17, 2015 at 19:49

David says Reinstate Monica

20.2k22 gold badges84 silver badges124 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related