Get Selected value from drop down AngularJs

Question

i have a scenario where admin from back-end will add questions, i don't know how many, i have to display them all on device and user will choose true false. Now at the end i have to submit these results according to question id.

this is my view code:

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

Select Options:

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

Finally i have to make these all like:

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

please advise. Thanks

Hadi · Accepted Answer · 2017-05-01 08:56:09Z

2

You should have some changes in your code.

1- Define Questions array with key of Answer, QuestionId and Comments.

2- Define model by using of $index form Questions array.

3- Update to this 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>

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 = [];

})

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

edited May 1, 2017 at 8:56

answered May 1, 2017 at 8:18

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alon Eitan Over a year ago

While this answer is correct, you should also explain to the OP what they did wrong, so they can better learn from your answer

Nisar Afridi Over a year ago

question have only ID and questionText. question.answer will result nothing. I am asking about controller end, like when i select i have everything required for answer from {{questionID}} - {{question.ID}} {"name":"True","value":"1"} - 1. All i want is to push these to controller end.

Collectives™ on Stack Overflow

Get Selected value from drop down AngularJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related