如何从数组中删除项目

Question

我有一个下拉菜单，其中的项目是从 $scope.role 中填充的。现在，在下拉列表中添加或选择值后，我需要从 $scope.role 中删除值。我做了 splice(index,1) 实际上只删除了第一个元素。需要帮助。

$scope.role = ['Actor', 'Director/ Asst. director', 'Lyricist',
 'Music director/ Asst. director', 'Singer', 'Standup Comedian', 'Model',
 'Cinematographer', 'Photographer', 'Script Writer', 'Choreographer',
 'Editor/ Promo editor', 'Costume designer', 'Art director', 'Stunt artist',
 'Voice-over artist', 'Graphic Designer', 'Screenplay', 'Dialogue', 
'Back ground music'];

Html:

 <div class="row newRow">
  <div class="form-group fields col-sm-2 col-xs-4">
    <label>ROLE *</label>
    <select name="role" class="form-control1 drop2" required ng-model="model.role" placeholder="select">
      <option value='' disabled selected>Select</option>
      <option ng-repeat="item in role track by $index" value="{{item}}">{{item}}</option>
    </select>
  </div>
  <div class="form-group col-sm-2 col-xs-4">
    <button ng-click="AddRole()">Click to Add Role</button>
  </div>
</div>

JS:

$scope.multiRoles = [];
$scope.role == $scope.dummy;
$scope.rolesAdded = false;

$scope.AddRole = function(index) {
  debugger;
  if ($scope.model.role !== undefined) {
    $scope.multiRoles.push($scope.model.role);
    $scope.role.splice(index, 1);
    console.log($scope.role);
  }
};

Answer 1

在您的 HTML 中，将 $index 传递给 AddRole。否则，函数不知道 $index 是什么，并且 在 ng-repeat:

中包含按钮

<select name="role" 
  class="form-control1 drop2" required  
  ng-model="model.role" placeholder="select">
    <option value='' disabled selected>Select</option>
    <option ng-repeat="item in role track by $index" value="{{item}}">   {{item}}
        <button ng-click = "AddRole($index)">Click to Add Role</button>
    </option>
</select>

在您的控制器中，我在评论中突出显示了一个额外的 =：

$scope.multiRoles = [];
$scope.role == $scope.dummy; // Why a `==` here? This should be a `=`
$scope.rolesAdded = false;        
$scope.AddRole = function(index){
   debugger;
   if($scope.model.role.length){ // Cleaner method to verify that the array is non-empty
   $scope.multiRoles.push($scope.model.role);
   $scope.role.splice(index,1);
     console.log($scope.role);
   }
 };

我还可以建议您将 Angular 的 select 实现与 ng-options 一起使用，因为：

Choosing between ngRepeat and ngOptions

In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:

更灵活地通过 select 分配 <select> 的模型作为理解表达式的一部分
通过不为每个重复实例创建新作用域来减少内存消耗
通过在 documentFragment 中而不是单独创建选项来提高渲染速度
具体来说，在 Chrome 和 Internet Explorer / Edge 中，从 2000 个选项开始，使用重复选项的 select 会显着降低速度。

Answer 2

您可以通过两种方式做到这一点 1) 按照@nikjohn 的建议，在 ng-click = "AddRole($index)" 中发送您的 $index of dropdown 然后 splice 否则

2) 您可以使用绑定到下拉列表的 ng-model 找到所选选项的索引。

     $scope.AddRole = function(){
          debugger;
          if($scope.model.role !== undefined ){
          $scope.multiRoles.push($scope.model.role);
          var index = $scope.role.indexOf($scope.model.role); //just find the right index which is the selected option in dropdown.
          $scope.role.splice(index,1);
                console.log($scope.role);
            }
        };

如何从数组中删除项目

How to remove item from an array

arrays

array-splice

angularjs

angularjs-ng-repeat

Choosing between ngRepeat and ngOptions