angularjs - 从输入选择中删除选项

时间:2014-05-27 06:14:42

标签: javascript arrays forms angularjs option

不能为我的生活弄清楚这一点。使用AngularJS。

我有一个下拉选择字段,其中包含多个选项。它是可以多次完成的表单的一部分(即"添加另一个"类型表单)。现在,其中一个选项可能只使用一次。如何在使用后从所有其他选择字段中删除此选项?

我正在与之合作:

HTML

<select ng-model="item.itemtype">
    <option ng-repeat="i in itemtype" value="{{i}}" ng-init="item.itemtype = itemtype[0]">{{i}}</option>
</select>


angularjs

  $scope.Items = [
    { 'itemtype': '', 'desc': '', 'color': '' }
  ];

  $scope.itemtype = [
    'shirt',
    'pants',
    'hats',
    'shoes',
    'special'];


我尝试过的(并且确实无法工作)

  $scope.specialremove = function() {
    var exist = Items.indexOf("special")
    if (exist !== 0) {
      return '';
    }
    else {
      return 'special';
    }
  }

我希望我不必转向任何其他框架来解决这个问题。请随意指出我的代码中的任何其他问题/错误/效率低下。

1 个答案:

答案 0 :(得分:1)

第一件可以帮助的事情是使用ng-options

ng-options="type for type in itemType"

最好让对象具有labelvalue属性,以便将其写为

ng-options="type.value as type.label for type in itemType"

并将显示的标签与选择的实际值分开。

在你的控制器中你应该有类似的东西:

  $scope.itemType= [
      ...
  ];
  $scope.selectedItem= $scope.itemType[0]; 

这样你就可以把select写成:

<select ng-Model="selectedItem" ng-options="item.value as item.label for item in itemType"></select>

要删除所选项目,您可以watch控制器中selectedItem的值:当它与您想要的值匹配时,将其从阵列中删除并相应地更新selectedItem。< / p>

这是一个基本的fiddle。我只需在选择后删除第三个选项,然后将所选项目重置为第一个选项。