CODEWITHSUNDEEP
angularjs
NiseNise
NiseNise

Reputation: 1172

Disable or Hide selected ng-options angularjs

I have a dropdown box where a input box is added once you select an option, but I want disable/hide/remove once that options is selected and then enable the option again once the input box is removed. Is the disabled expression the best option to go. Any help will be appreciates

http://plnkr.co/edit/PPDYKjztPF528yli9FbN?p=preview

 <fieldset>
    <div ng-repeat="choice in formOptionData track by $index">
      <a class="remove-field remove u-pull-right" ng-click="remove()">Remove</a>
      <input id="input{{choice.name}}" placeholder="{{choice.label}}" type="number" name="{{choice.name}}">
    </div>  
      <div id="add-more" class="well">
        <div class="field">
          <div style="width:100%;" class="dropdown">
            <select name="{{options.name}}" id="select" data-ng-model="selectedValue[options.name]" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="onCategoryChange(selectedValue)">
              <option value="" data-id="null" disabled="" selected="">Select an item...</option>
            </select>
          </div>
        </div>
      {{formData}}
    </div>
    </fieldset>

Upvotes: 2

Views: 4307

Answers (1)

Minato
Minato

Reputation: 4533

There's a lot of modification to be done to your code to get the functionality you want. I took the liberty to fork your plunk to implement this functionality.

Your plunk initially didn't work, since your markup had a lot of mistakes.

  1. You were iterating over non-existing array questionList I changed it to item

    <div ng-repeat="element in questionList">
//changed to
<div ng-repeat="element in item">

  2. I think you're referring to question as your controller's scope, multiple times in your code. to do that you have to use use ng-controller="QuestionController as question" but I don't do that so I have removed all the references to question and furthermore since you need different options for different items so you should be making forOptionData specific to element in question.

    <div ng-repeat="choice in question.formOptionData track by $index">
//changed to
<div ng-repeat="choice in element.formOptionData track by $index">

  3. Since you want individual option to be disabled you should not use ng-options as it doesn't provide such functionality, instead you should repeat over the options array in a separate <option> tag. with some object attribute for ng-disabled as I have attached the selectable attribute to the option object. Note: value of option is usually id or something but since you are using the complete object it is not possible to us it in the value attribute so I have passed the index and grabbing the object using its index

    <select name="" id="select" data-ng-model="selectedValue" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="question.onSelectionChange(selectedValue)">
  <option value="" data-id="null" disabled="" selected="">Select an item...</option>
</select>
//changed to
<select name="" id="select" ng-model="element.selectedValue"  ng-change="onSelectionChange(element,element.inputElement[element.selectedValue])" ng-init="element.formOptionData=[];selectedValue=''">
  <option value="" data-id="null" disabled="true" selected="">Select an item...</option>
  <option ng-repeat="options in element.inputElement | orderBy:'label' track by $index" ng-disabled="!options.selectable" value="{{$index}}" ng-init="options.selectable = true">{{options.label}}</option>
</select>

  4. I have changed your JS that handles remove and selectChange functionality to cater these new changes.

    $scope.onSelectionChange = function(selectedItem) {
  this.formOptionData.push(selectedItem);
};
$scope.remove = function(element) {
  this.formOptionData.splice(element, 1);
};
//changed to
$scope.onSelectionChange = function(element, selectedItem) {
  selectedItem.selectable = false; //disable since selected
  console.log(selectedItem)
  element.formOptionData.push(selectedItem); //push to element specific formOptionData. or it'll be shared.
  console.log(element)
};
$scope.remove = function(choice, element, $index) {
  temp = element.formOptionData.splice($index, 1)[0];//spliced object is returned as array. take first element of it
  console.log(temp)
  temp.selectable = true;//since removed enable it back.
};

plunk

Note: It is your responsibility to clean this messy code.

whew....

check this plunk and compare it with your plunk

Upvotes: 2

Related Questions