输入类型范围数组值和提交的ID

Question

I'm try to get the array of range type values and ids to submit in ionic AngularJS

Here's my HTML:

<ion-view view-title="Survey">
 <ion-content class="padding survey">
  <h4 class="animated flash"><i class="fa fa-exclamation" aria-hidden="true">
   </i> {{surveys.displayTitle}}</h4>

<section class="item" ng-repeat="survey in surveys.questions">
  <p>{{survey.displayTitle}} <i class="fa fa-check" aria-hidden="true"></i></p>
  <div class="range">
    <i class="icon ion-sad"></i>
    <input type="range" min="{{min}}" max="{{max}}" name="" id="{{survey.id}}" ng-model='modelValue' value="{{modelValue}}">
    <i class="icon ion-happy"></i>
  </div>
</section>

<button class="button button-block button-assertive" ng-click="survey()">
  <span ng-hide="loading">Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></span>
  <span ng-show="loading">Please wait <i class="fa fa-spinner fa-spin"></i></span>
</button>

And here is my controller button click

$scope.survey = function(){
   $scope.loading = true;
   $http.post(sharingDataService.getApiUrl() + '/app/surveylink', {
       "answers" : [
         {"questionId" : 1, "value" : $scope.value},
         {"questionId" : 2, "value" : $scope.value},
         {"questionId" : 3, "value" : $scope.value},
         {"questionId" : 4, "value" : $scope.value}
       ]
   }).then(function (data) {
       console.log(data);
   }
);

Answer 1

you can bind range with a property (named whatever, here modelValue for eaxmple) to survey with ng-model . This property will be updated when range has been changed.

And you can get the changed value in controller by :

"answers" : [
     {"questionId" : 1, "value" : $scope.surveys.questions[0].modelValue},
     {"questionId" : 2, "value" : $scope.surveys.questions[1].modelValue},
     {"questionId" : 3, "value" : $scope.surveys.questions[2].modelValue},
     {"questionId" : 4, "value" : $scope.surveys.questions[3].modelValue}
]

UPD:

If you bind range with both ng-model and value (different values), the value property will be ignored.

 angular.module("app", []) .controller("myCtrl", function($scope) { $scope.min = 10; $scope.max = 100; $scope.modelValue = 50; $scope.surveys = { questions: [ { id: 1, detail: 'question1', modelValue: 50 }, { id: 2, detail: 'question2', modelValue: 60 }, ] } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <section class="item" ng-repeat="survey in surveys.questions"> <div class="range"> <input type="range" min="{{min}}" max="{{max}}" name="" id="{{survey.id}}" ng-model='survey.modelValue' value="modelValue" > {{survey.modelValue}} </div> </section> {{surveys.questions}} </div> 

Answer 2

Frist of all thanks pengyy for help and here is the complate foreach angularjs way

// your data object
var obj = $scope.surveys.questions;
        var answers = [];
        angular.forEach(obj, function(value, key) {
            answers.push({"questionId" : value.id, "value" : value.modelValue});
        });

        $http.post(sharingDataService.getApiUrl() + '/your link', {
                "answers" : answers}
        ).then(function (data) {
            your code
        });