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是将视图绑定到模型而不是直接与DOM交互的标准方法。

您可以在div id="rankingForm"中获得所有输入：

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

或者使用Document.querySelectorAll()：

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

一旦你拥有inputs而不是遍历所有值来获取值..请注意我已将属性name添加到输入中：

代码whitout ngModel ：

＆＃13;

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

＆＃13;

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

＆＃13;

代码ngModel ：

＆＃13;

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

＆＃13;

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

＆＃13;

Angular JS从div收集所有输入值

1 个答案: