3

I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:

<select ng-model="datacut.ages" multiple>
   <option value="" disabled="disabled">Please Select</option>
   <option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
   <option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
   <option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>

Controller:

$scope.toggleSelect = function(dc, str){
    dc.ages.splice(dc.ages.indexOf(str), 1);
    //e.currentTarget.selected = !e.currentTarget.selected;
};

The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.

I feel like this should have a simple solution, but I can't really figure out an elegant solution.

Any help would be much appreciated.

Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.

  • Why do you have the toggleSelect? That function removes your selection from the model i.e. the option will never get selected which is why it gets unselected. If you remove the ng-click and all the ng-selected it works fine – user2718281 Dec 3 '15 at 23:10
  • Yeah, I'll add an edit for clarification, but I want to be able to unselect things (so that nothing is selected) – Dave M Dec 4 '15 at 14:50
1

Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle

<select ng-model="datacut.ages" multiple>
  <option value="" disabled="disabled">Please Select</option>
  <option ng-value="'0-15'">15 and Younger</option>
  <option ng-value="'16-19'" >16 - 19</option>
  <option ng-value="'20-24'" >20 - 24</option>
</select>
|improve this answer|||||
  • You can select AND unselect options? So you can pick the '0-15' and then unselect it so that nothing is selected? If so, there's something else wrong with my program – Dave M Dec 4 '15 at 16:03
0

It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item. See my plunker

 <select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
        <option value="" disabled="disabled">Please Select</option>

        <option ng-repeat="age in datacut.ages" value="{{age}}">
          {{age}}
        </option>
      </select>

EDIT: This should be made in a directive because you need to update the option html to unselect the option.

|improve this answer|||||
  • Yes that's is what splice do it deletes the item from array and i create the options of the combobox from the ages attribute of the controller – Raulucco Dec 4 '15 at 16:08
  • Okay. I need to leave all the possibilities in the list. I was splicing to try and remove them from the associated ng-model (which would remove them from being selected) – Dave M Dec 4 '15 at 16:11
  • I am very confused. If you know that one option should not be selectable why no just disable it? Won't it be a better option? – Raulucco Dec 4 '15 at 16:24
  • All options are 'selectable' though. I just want to be able to click a selected option and unselect it. I can just use command click to do it unless I get a good solution. – Dave M Dec 4 '15 at 16:31
  • @Dave M So I changed the implementation to a directive because the option with the 'bad' value has to be unselected manually. – Raulucco Dec 4 '15 at 17:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.