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

Question

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>

I'm confused about your question. If you put ng-model="foo" on the <select> then you would get an array of ["US","CA"], etc. Why can't you use that? — Explosion Pills
– Explosion Pills, Commented Nov 10, 2015 at 3:43
using ui-select you can bind to array of objects rather than to just array of string — harishr
– harishr, Commented Nov 10, 2015 at 3:43
hey @ExplosionPills, the reason why i don't use a ng-model is the model is already binded setup for checkboxes (each individual checkbox binds to the individual choice object via ng-model="choice.selected")... when the view switches to mobile layout if the user resizes the page, and i show the select dropdown instead. I guess I could have 2 different kinds of models for the 'grid' question and try to keep them in sync so when user updates one, update the other, and when user saves the page, use only the main model; but thought would be nice to figure out how to bind without needing to do that. — armyofda12mnkeys
– armyofda12mnkeys, Commented Nov 10, 2015 at 17:19
@entre, ill take a look at that plugin again. I think i was worried about it not looking good on mobile (as alot of the select plugins i viewed didnt have a nice mobile solution so it doesn't overscroll the page for example), so wanted to go the native approach as I liked how android popups with a native full page scroll to pick options from if its a select multi-select. — armyofda12mnkeys
– armyofda12mnkeys, Commented Nov 10, 2015 at 17:22

Joao Polo · Accepted Answer · 2015-11-10 03:52:11Z

1

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

answered Nov 10, 2015 at 3:52

Joao Polo

2,1631 gold badge17 silver badges27 bronze badges

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

5 Comments

Joao Polo Over a year ago

but it generates undesired effects, when you try to select using the key shift

armyofda12mnkeys Over a year ago

yes it has some weird side effects. For example you click United States, it sets the selected property as true as expected ... but if you click on another option like Canada (without using cntrl/shift, so repicking a new option), it doesn't 'unset' the value of United States. Also eventually it'll get a bit more complicated. like I'll add an 'exclusive' boolean proprty to the choices ... so clicking an exclusive option 'None of the above' eventually needs to clear out the previous values. and clicking a non-'None of the above' option needs to clear the 'None of the above' checkbox.

armyofda12mnkeys Over a year ago

in my non-mobile layout for the 'grid' question, i have input/checkboxes and use ng-change="toggleExclusivity(choice, currentquestion.choices)" on the input tag... then use a function to dynamically do that kind of stuff. Maybe I can use the same on <option> ... wonder if ng-change is allowed on option tags

armyofda12mnkeys Over a year ago

Got a little bit closer w/ none of the above functionality added: jsbin.com/worucozexa/edit?html,js,output but still back to main issue where doesn't unselect the others if you pick a standalone option.

Joao Polo Over a year ago

I will do a directive to reflects between lists (selected lists, originate from select, and your list... something like reflect-on="main_question.choices" with extra information reflect-on-field="selected".

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related