注意：您有责任清理这个混乱的代码。

Question

我有一个下拉框，一旦你选择了一个选项就会添加一个输入框，但我想在选择了这些选项后禁用/隐藏/删除，然后在删除输入框后再次启用该选项。禁用表达式是最佳选择。任何帮助将是赞赏

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>

Answer 1

您需要对代码进行大量修改才能获得所需的功能。我冒昧地试图实现这一功能。

你的插件最初没有用，因为你的标记有很多错误。

您正在迭代不存在的数组questionList我将其更改为item

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

我认为您在代码中多次将question称为您的控制器范围。要做到这一点，你必须使用ng-controller="QuestionController as question"，但我不这样做，所以我删除了所有对question的引用，而且因为你需要不同的选项，所以你应该做forOptionData具体针对element。
```
<div ng-repeat="choice in question.formOptionData track by $index">
//changed to
<div ng-repeat="choice in element.formOptionData track by $index">
```

由于您希望禁用个别选项，因此您不应使用ng-options，因为它不提供此类功能，而应在单独的<option>中重复选项数组标签。使用ng-disabled的某个对象属性，因为我已将selectable属性附加到选项对象。 注意：value选项通常是id或者其他东西，但由于您使用的是完整对象，因此无法在value属性中使用它，因此我已通过索引并使用其索引

抓取对象

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

我更改了处理remove和selectChange功能的JS，以满足这些新变化。

$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

注意：您有责任清理这个混乱的代码。

呼....

检查此plunk并将其与plunk

禁用或隐藏选定的ng-options angularjs

1 个答案:

注意：您有责任清理这个混乱的代码。

呼....