禁用或隐藏选定的ng选项angularjs

我有一个下拉框，一旦你选择了一个选项，就会添加一个输入框，但我想在选择了该选项后禁用/隐藏/删除，然后在删除输入框后再次启用该选项。禁用的表达式是最好的选择。 任何帮助都将不胜感激

去除
选择一个项目。。。
{{formData}}

要获得所需的功能，需要对代码进行大量修改。我冒昧地用你的叉子来实现这个功能

您的plunk最初不起作用，因为您的标记有很多错误

您正在迭代不存在的数组

questionList

I将其更改为

item

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

由于您希望禁用单个选项，因此不应使用

ng options

，因为它不提供此类功能，而是应在单独的

标记中的选项数组上重复。禁用了

ng的某些对象属性

，因为我已将

可选

属性附加到选项对象注意：

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>

注意：清理这些混乱的代码是您的责任。 呼。。。。

---

---

检查此项并将其与您的

Try use

ng disabled=expression

进行比较。这里有

表达式

是角度表达式，计算为真或假。我添加了ng selected=“inputSelection=”从列表中选择”ng disabled=“options==inputSelection”>但似乎禁用了整个框，只想禁用单个选项。在选项标记上添加

ng disabled

。或者提供工作弹跳）不可能将所有连接的部分都提供给代码，因为它太大了，所以试图提供组件的快照，我需要开始工作。但是谢谢，我会用我的代码来尝试你的解决方案。哦，是的，这里和那里有一些小麻烦。非常感谢much@NiseNise我花了一个小时来实现这一点。

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

$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.
};