CODEWITHSUNDEEP
angularjs
armyofda12mnkeys
armyofda12mnkeys

Reputation: 3442

how to bind angular to a single option object's property instead of an ng-model array for select multiple dropdowns

I am trying to use an angular binding on a select multi-select without using a main array to hold the values (most examples I see bind straight to the select tags via ng-options and ng-model, but I can't use a simple array to store the data right now outside of the options, but need to store if option is selected within the options themselves).

Here is an example of using ng-selected to initially select values based on a property 'selected' on the choice: http://jsfiddle.net/armyofda12mnkeys/aLkLqqL6/3/ I was hoping I could add an ng-model="choice.selected" to the above code on the option tag (but that won't work as ng-model isn't meant to be used on an option tag).

Whats the best way to bind to each individual choice object? Maybe a $watch of some sort or manual change event would work? Thanks for any ideas/fiddle

P.S. the reason why I'm doing this is the model this is for is usually setup for 'grid' questions that have like 10 checkboxes going horizontally across the screen, and each choice sets its selected property like normal for a checkbox... But in mobile layouts, I switch the 'grid view' to be a native multi-select dropdown, which looks nicer on mobile, but it has to use the same model which I can't figure out.

var myApp = angular.module('myApp',[]);

var myApp = angular.module('myApp',[]);


myApp.controller("MyCtrl", function ($scope) {

    $scope.main_question = 
    {
         qid: 'QS1', 
         question_type: 'dropdown', 
         text: 'What country you from? ',
         dropdownAnswer: 'CA',
         choices: [
             {option_value: 'US', option_txt: 'United States', selected: false},
             {option_value: 'CA', option_txt: 'Canada', selected: true},
             {option_value: 'MX', option_txt: 'Mexico', selected: false},
             {option_value: 'DE', option_txt: 'Germany', selected: true},
             {option_value: 'NN', option_txt: 'None of the Above (exclusive, should unset other options)', selected: false}
         ]
    };
    
  
        
});
        
select {
   height: 10em; 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        
        
        <div>
            {{main_question.qid}}. {{main_question.text}}<br/>
            <select              
              name="{{main_question.qid}}" 
              id="{{main_question.qid}}"  
              multiple="multiple"
            >
              <option value="" id="{{main_question.qid}}_not_picked">--Please Choose--</option>
              <option
                ng-repeat="choice in main_question.choices"
                id="{{main_question.qid}}_{{choice.option_value}}"
                ng-value="{{choice.option_value}}"
                ng-selected="choice.selected"                
                >{{choice.option_txt}}</option>
            </select>
            
        </div>
        
        <br/>{{main_question.choices}}
       
          
    </div>
</div>

Upvotes: 0

Views: 781

Answers (1)

Joao Polo
Joao Polo

Reputation: 2163

You can to use ng-click to invert the selection:

<option
                ng-repeat="choice in main_question.choices"
                id="{{main_question.qid}}_{{choice.option_value}}"
                ng-selected="choice.selected"                   
                ng-click="choice.selected = ! choice.selected"
                >{{choice.option_txt}}</option>

Take a look at jsbin

Upvotes: 1

Related Questions