从下拉AngularJs获取选定的值

时间:2017-05-01 08:14:29

标签: angularjs

我有一个场景,来自后端的管理员会添加问题,我不知道有多少,我必须在设备上显示它们,用户将选择true false。现在最后我必须根据问题ID提交这些结果。

这是我的观看代码:

<div class="list" ng-repeat="question in questions">
                    <label class="item item-input item-select">
                        <div class="input-label">
                            {{question.Question}}
                        </div>
                        <select ng-model="questionID" ng-required="true" ng-options="op as op.name for op in options">
                        </select>
                    </label>
                    <label class="item item-input">
                        <textarea placeholder="Comments"></textarea>
                    </label>
                    {{questionID}} - {{question.ID}} //Test: this is to get selected option, value and question id
                </div>

选择选项:

$scope.options = [
        { 'name': 'Select', 'value': '' },
        { 'name': 'True', 'value': '1' },
        { 'name': 'False', 'value': '0' }
        ];

最后,我必须把这些都像:

"Questions": [
     {
        "QuestionID": 1,
        "Answer": 1,
        "Comment" : "Some Comments"     
     },
     {
        "QuestionID": 2,
        "Answer": 0,
        "Comment" : "Some Comments"
     }
    ]

请指教。感谢

1 个答案:

答案 0 :(得分:2)

您的代码应该有一些变化。

1 - 使用QuestionsAnswerQuestionId键定义Comments数组。

2 - 使用$index表单Questions数组定义模型。

3 - 更新至此ng-options="op.value as op.name for op in options"

 <select ng-model="question.Answer" ng-required="true" ng-options="op as op.name for op in options">
  </select>

 <textarea ng-model="question.Comment" placeholder="Comments"></textarea>

&#13;
&#13;
var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
  $scope.options = [{
      'name': 'Select',
      'value': ''
    },
    {
      'name': 'True',
      'value': '1'
    },
    {
      'name': 'False',
      'value': '0'
    }
  ];

  $scope.questions = [{
    "Question": "Question1",
      "QuestionId":1
  }, {
    "Question": "Question2",
         "QuestionId":2
  }];
  
   $scope.Questions = [];

})
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="anApp" ng-controller="ctrl">
  <div class="list" ng-repeat="question in questions">
      <input type="text" ng-show="false" ng-value="Questions[$index].QuestionId = question.QuestionId">
    <label class="item item-input item-select">
                        <div class="input-label">
                            {{question.Question}}
                        </div>
                        <select ng-model="Questions[$index].Answer" ng-required="true" ng-options="op.value as op.name for op in options">
                        </select>
                    </label>
    <label class="item item-input">
                        <textarea ng-model="Questions[$index].Comments"></textarea>
                    </label>

  </div>

  {{Questions | json}}
</div>
&#13;
&#13;
&#13;