How to remove item from an array

Question

I have a dropdown where items are populated from $scope.role. Now I need to remove the values from $scope.role once the value is added or selected in dropdown. I did splice(index,1) which actually delete the first element only. Need assistance.

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

what do you mean by I did splice(index,1) which actually delete the first element only? do you have duplicate keys in your array? If yes, you wanna delete all the duplicated keys? — Mr.7
– Mr.7, Commented Oct 6, 2016 at 7:28
@NicoletaWilskon you are passing nothing to AddRole. index is undefined. So it deletes the first element only. — ram1993
– ram1993, Commented Oct 6, 2016 at 7:31

ngCoder · Accepted Answer · 2016-10-06 07:42:58Z

2

You can do it in two ways 1) As suggested by @nikjohn by sending your $index of dropdown in ng-click = "AddRole($index)" and then splice or else

2) You can find the index of the selected option by using the ng-model binded to the dropdown.

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

answered Oct 6, 2016 at 7:42

ngCoder

2,1051 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicoleta Wilskon Over a year ago

Thank you.Its really helpful.var index = $scope.role.indexOf($scope.model.role); this is were i lacked .

ngCoder Over a year ago

Glad it helped you ! Happy coding mate :) One more to suggest use ng-options instead of ng-repeat that has many capabilities in case of drop down.

ngCoder Over a year ago

@NicoletaWilskon can you accept this as an answer mate ?

Mr Lister · Accepted Answer · 2016-10-14 19:56:58Z

0

In your HTML, pass $index to the AddRole. Otherwise, the function does not know what $index is, and also include the button within the 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>

In your Controller, there's an extra = that I've highlighted in my comment:

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

May I also suggest that you use Angular's select implementation with ng-options because:

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:

more flexibility in how the <select>'s model is assigned via the select as part of the comprehension expression
reduced memory consumption by not creating a new scope for each repeated instance
increased render speed by creating the options in a documentFragment instead of individually
Specifically, select with repeated options slows down significantly starting at 2000 options in Chrome and Internet Explorer / Edge.

edited Oct 14, 2016 at 19:56

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Oct 6, 2016 at 7:37

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

5 Comments

Nicoleta Wilskon Over a year ago

Hi ,even this delete the first array element .

nikjohn Over a year ago

You also need to put the button within your ng-repeat. Updated the answer

Anil Kumar Ram Over a year ago

nickjohn. $index is not proper solution in this case

nikjohn Over a year ago

@AnilKumarRam Why's that?

ngCoder Over a year ago

@nikjohn you solution is also right mate but in many cases you dont want to repeat you button element in ng-repeat as you display it only once so that's this solution is not that feasible.

Collectives™ on Stack Overflow

How to remove item from an array

2 Answers 2

3 Comments

Choosing between ngRepeat and ngOptions

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Choosing between ngRepeat and ngOptions

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related