Remove select options based on button click in angular js

Question

In my app i have a select html which has following options "Addition","Deletion","Duplicate","Member Duplicate"

Above drop down page is common for both add and edit screen. As of now if we come from any addition click or edit click drop-down has all options. (Note: drop-down binds at the time of loading page itself. we will show/hide depending on click)

As per new requirement I need to remove all other options except "Addition" in addition click and remove "Addition" option in edit click.

select html:

<select name="ReasonID" required ng-model="member.ReasonID" class="form-control" ng-options="reason.ID as reason.Description for reason in reasons |orderBy: reason.Description"></select>

Js

$scope.manageMember = function (member) {
  $scope.showGrid = false; 
  $scope.showForm = true;
  reset();
  $scope.memberTemp = member;
  angular.extend($scope.member, member); };

Please let me know if you need more details from my end.

Answer 1

Update :

Here the full sample code and working demo with dummy data.

HTML

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <select name="ReasonID" required ng-model="member.ReasonID" class="form-control" ng-options="reason.ID as reason.Description for reason in reasons |orderBy: reason.Description"></select>
    <br/>
   <input type="button" ng-click="manageMember(undefined)" value="add"/>
    <input type="button" ng-click="manageMember('bla bla bla')" value="edit"/>
  </div>
</div>

JS

function TodoCtrl($scope) {
  $scope.reasons = [{ID:1,Description :"Addition"},  {ID:2,Description :"Deletion"},{ID:3,Description :"Duplicate"},{ID:4,Description :"Member Duplicate"}];

var reasonsTemp =angular.copy($scope.reasons); 

$scope.manageMember = function (member) {
console.log(reasonsTemp)
  $scope.reasons=reasonsTemp;// assign global object to model
  $scope.showGrid = false; 
  $scope.showForm = true;  
  $scope.memberTemp = member;   
  var EditArray=[];
   for(var i = 0 ; $scope.reasons.length>i;i++)
   {
    if($scope.reasons[i].Description === ($scope.memberTemp == undefined ? "Addition" : "bla bla bla"))// condition for is this addition or not
     {
     EditArray = $scope.reasons[i];
     break;   
     }     
     else // if is it not addition, then addition only offect that object. because we were already assigned original value globally
     {   
      if($scope.reasons[i].Description!=="Addition")
      {
        EditArray.push($scope.reasons[i])
      }
     }
   }
   $scope.reasons=EditArray;
   console.log($scope.reasons);
 }
}

Working Demo On console window

Answer 2

Try this, HTML

  <select ng-model="selectedOption">
   <option ng-show="reason.show" ng-repeat="reason.ID as reason.Description for reason in reasons |orderBy: reason.Description">{{reason.ID}}</option> 
  </select>

JS

$scope.manageMember = function (member) {
 $scope.showGrid = false; 
 $scope.showForm = true;
 reset();
 $scope.memberTemp = member;   
 angular.extend($scope.member, member);
 if(member){
    for(var i = 0 ; $scope.reasons.length>i;i++)
     { 
       $scope.reasons[i].show = true;
       if($scope.reasons[i].ID == "Addition"){$scope.reasons[i].show = false;}
     }
   }else{
       for(var i = 0 ; $scope.reasons.length>i;i++)
     { 
       $scope.reasons[i].show = false;
       if($scope.reasons[i].ID == "Addition"){$scope.reasons[i].show = true;}
     }
  }
}