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是將視圖綁定到模型而不是直接與DOM交互的標準方法。

你可以得到所有的div id="rankingForm"中，你可以做輸入：通過使用Document.querySelectorAll()

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

或者：

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

一旦你的inputs比遍歷所有的人都得到值。請注意，我已將屬性name添加到輸入中：

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

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