Angular JS collect all input values from a div

Question

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 ?

do you not need any validation or checking that the data is actually present? — haxxxton
– haxxxton, Commented Dec 2, 2016 at 7:56
All input fields are dynamically generating from server response. So How can I maintain all ng-model variables ? — Voora Tarun
– Voora Tarun, Commented Dec 2, 2016 at 8:01
you only need a name (unique identifier for field) and the value you wish to populate it with (if any).. — haxxxton
– haxxxton, Commented Dec 2, 2016 at 8:05
@VooraTarun I'm wondering, why don't you want to use ng-model. It's standard Angular approach - to work with model, not with DOM directly. Your current implementation eliminates all Angular's advantages and doesn't make any difference with old jQuery approach. — Valentin Korolev
– Valentin Korolev, Commented Dec 2, 2016 at 8:45

Yosvel Quintero · Accepted Answer · 2016-12-02 09:38:21Z

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>

Collectives™ on Stack Overflow

Angular JS collect all input values from a div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related