CODEWITHSUNDEEP
angularjs
prameela rani
prameela rani

Reputation: 223

Remove select options based on button click in angular js

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.

Upvotes: 5

Views: 5797

Answers (3)

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38693

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

Upvotes: 1

Manoj Lodhi
Manoj Lodhi

Reputation: 988

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

Upvotes: 1

Akshay Kumar
Akshay Kumar

Reputation: 576

Suppose you have two buttons as,

<input type="button" ng-click="toAdd=true">Add</input>
<input type="button" ng-click="toAdd=false">Edit</input>

And the select box code should be like,

<select ng-model="selectedOption">
   <option ng-show="toAdd">Addition</option>
   <option ng-show="!toAdd">Deletion</option>
   <option ng-show="!toAdd">Duplicate</option>
   <option ng-show="!toAdd">Member Duplicate</option>
</select>

Hope this helps.

Upvotes: 0

Related Questions