CODEWITHSUNDEEP
javascriptangularjsinput
Voora Tarun
Voora Tarun

Reputation: 1216

Angular JS collect all input values from a div

I am new to Angular JS, I created a div with input elements and I didn't use ng-model for input boxes.

<div class="row">
    <br>
    <div class="col-sm-10" id="rankingForm" >
        <p ng-repeat=" x in $ctrl.outputProductAttributeValueList">
             {{x}} &nbsp;&nbsp;&nbsp; <input type="text" />
        </p>
        <br>
        <button type="submit" ng-click="$ctrl.onRankingFormSubmit()"> SUBMIT</button>
    </div>
</div>

When I click on submit button I have to access all input values .Please help me how to do that .. I tried as below.

angular.module("productList")
.component("productList",{
       templateUrl : "product-list/product-list.template.html",
        controller : ["$http" ,"$scope","$document",function productListController($http,$scope,$document){
            var self = this;

            self.outputProductAttributeValueList =[ "age", "gender","all"];

            self.onRankingFormSubmit = function () {
                var queryResult = $document[0].getElementById("rankingForm")
                console.log(queryResult);
                // HERE queryResult is printing how to proceed further
            };

        }]
    });

Now I want to collect all those input values dynamically created by ng-repeat. Please tell me how to do that ?

Upvotes: 1

Views: 4145

Answers (1)

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

AngularJS ngModel is the standard approach for binding the view into the model instead of interacting directly with the DOM.

You can get all the inputs within the div id="rankingForm" you can do: 

var inputs = $document[0]
    .getElementById('rankingForm')
    .getElementsByTagName('input');

Or by using Document.querySelectorAll():

var inputs = $document[0].querySelectorAll('#rankingForm input');

Once you have the inputs than iterate over all of them to get the values.. Notice that I have added attribute name to the inputs:

Code whitout ngModel:

angular
  .module('App', [])
  .controller('AppController', ['$scope', '$document', function ($scope, $document) {
    $scope.outputProductAttributeValueList = ['age', 'gender', 'all'];

    $scope.onRankingFormSubmit = function () {
      var inputs = $document[0].querySelectorAll('#rankingForm input');
      
      inputs.forEach(function(input) {
        console.log(input.name + ': ' + input.value);
      });
    };
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>

<div ng-app="App" ng-controller="AppController" class="row">
  <br>
  <div class="col-sm-10" id="rankingForm" >
    <p ng-repeat="x in outputProductAttributeValueList">
      {{x}} &nbsp;&nbsp;&nbsp; <input type="text" name="{{x}}" />
    </p>
    <br>
    <button type="submit" ng-click="onRankingFormSubmit()">SUBMIT</button>
  </div>
</div>

Code with ngModel:

angular
  .module('App', [])
  .controller('AppController', ['$scope', '$document', function ($scope, $document) {
    $scope.outputProductAttributeValueList = ['age', 'gender', 'all'];
    
    // Model inputs
    $scope.inputs = {};

    $scope.onRankingFormSubmit = function () {      
      $scope.outputProductAttributeValueList.forEach(function(input) {
        // Access to model inputs: $scope.inputs[input]
        console.log(input + ': ' + $scope.inputs[input]);
      });
    };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>

<div ng-app="App" ng-controller="AppController" class="row">
  <br>
  <div class="col-sm-10" id="rankingForm" >
    <p ng-repeat="x in outputProductAttributeValueList">
      {{x}} &nbsp;&nbsp;&nbsp; <input type="text" ng-model="inputs[x]" />
    </p>
    <br>
    <button type="submit" ng-click="onRankingFormSubmit()">SUBMIT</button>
  </div>
</div>

Upvotes: 2

Related Questions