用于提交的输入类型范围数组值和 id答案

【问题标题】：Input type range array value and ids for submit用于提交的输入类型范围数组值和 id
【发布时间】：2017-05-09 09:28:42
【问题描述】：

我正在尝试获取范围类型值和 id 的数组以在 ionic AngularJS 中提交

这是我的 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>

这是我的控制器按钮点击

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

【问题讨论】：

有什么问题？我不明白你想要完成什么。
我需要从 html 中获取值和 id 到控制器并提交
看看docs.angularjs.org/api/ng/directive/ngModel

标签： javascript angularjs input ionic-framework range

【解决方案1】：

您可以将range 与property（命名为任意名称，此处为modelValue 示例）绑定到survey 与ng-model。当range 更改时，此属性将更新。

您可以通过以下方式在控制器中获取更改的值：

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

如果您将range 与ng-model 和value（不同的值）绑定，则value 属性将被忽略。

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>

【讨论】：

@eldewiny 哎呀，我刚刚发现我打错字了，应该是$scope.surveys.questions[3]，再检查一遍。
我更新了我的代码，但我得到了控制台错误：TypeError: Cannot read property 'modelValue' of undefined
@eldewiny 你有没有改变过每个范围的值？如果没有，这将会发生。在初始化$scope.surveys 时添加属性怎么样。
"answers" : [ {"questionId" : 1, "value" : $scope.surveys.questions[0].modelValue}, {"questionId" : 2, "value" : $scope .surveys.questions[1].modelValue}，{“questionId”：3，“value”：$scope.surveys.questions[3].modelValue}，{“questionId”：4，“value”：$scope.surveys .questions[4].modelValue} ]

【解决方案2】：

首先感谢 pengyy 的帮助这是完整的 foreach angularjs 方式

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

【讨论】：