javascript - Angular JS 从一个 div 收集所有输入值

Question

我是 Angular JS 的新手，我创建了一个带有输入元素的 div，但我没有将 ng-model 用于输入框。

<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>

当我点击提交按钮时，我必须访问所有输入值。请帮助我如何做到这一点。我试过如下。

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
            };

        }]
    });

现在我想收集所有由 ng-repeat 动态创建的输入值。请告诉我该怎么做？

Answer 1

AngularJS ngModel是将 View 绑定(bind)到模型而不是直接与 DOM 交互的标准方法。

您可以获得 div id="rankingForm" 中的所有输入，您可以这样做:

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

或使用 Document.querySelectorAll() :

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

一旦你有了 inputs，然后遍历所有输入以获取值。请注意，我已将属性 name 添加到输入中:

没有 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>

使用 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>