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.

<select class="form-control" ng-model="accountsel" ng-change="getMembership()" ng-options="account.CustomerName for account in accounts | orderBy: account.CustomerName" > </select> — prameela rani
– prameela rani, Commented Dec 19, 2016 at 7:41
When you are referring to addition click what does that mean. Do you mean that when a user selects addition from select box then all other option for the same select box should be removed? — Akshay Kumar
– Akshay Kumar, Commented Dec 19, 2016 at 7:48
No. There are 2 buttons.. on click of "Add" button then I need to hide/remove all options from select html except "Addtion" option. On click of "edit" then I need to hide/remove only "Addition" option from select html. — prameela rani
– prameela rani, Commented Dec 19, 2016 at 7:52

Ramesh Rajendran · Accepted Answer · 2016-12-19 13:00:43Z

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

edited Dec 19, 2016 at 13:00

answered Dec 19, 2016 at 9:47

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

8 Comments

prameela rani Over a year ago

this is how we call manage member function: add button: <div class="col-xs-2"> <button type="button" class="btn btn-success" ng-click="manageMember()" ng-show="accountsel" > <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Member </button> </div>

prameela rani Over a year ago

edit button click (Edit is an image) : <button type="button" class="btn btn-warning" ng-click="manageMember(auditmembership)" > <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span> </button>

Ramesh Rajendran Over a year ago

without passing parameter value auditmembership(). how it will be work??

Ramesh Rajendran Over a year ago

And what is the value of auditmembership?

Ramesh Rajendran Over a year ago

that's why I wrote this code $scope.memberTemp == undefined ? "Addition" : "bla bla bla . please read my full inline comments and check it out Rani

|

Ramesh Rajendran · Accepted Answer · 2016-12-19 12:17:39Z

1

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

edited Dec 19, 2016 at 12:17

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

answered Dec 19, 2016 at 10:06

Manoj Lodhi

9884 silver badges10 bronze badges

8 Comments

Manoj Lodhi Over a year ago

@prameela, please let me know that "Addition" is in your ID or Desrciption.

Ramesh Rajendran Over a year ago

Hi dude, your answer is just awesome . but remove this code $scope.reasons=reasonsTemp from your answer . because some one find this line from my answer.

Manoj Lodhi Over a year ago

Ok @RameshRajendran i thought u used the same (first five lines) as given in question, so took from here, it will no matter for me as i didn't use this variable. BTW thanks to remind :)

Ramesh Rajendran Over a year ago

Why you using angular.extend($scope.member, member); here?

Manoj Lodhi Over a year ago

Because OP wants to copying properties in $scope.member, may be she is using this variable in somewhere in view. It will not reflect my code so did not remove it. But in case of undefined (member) may be it will be a error, will it?

|

Akshay Kumar · Accepted Answer · 2016-12-19 08:17:26Z

0

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.

answered Dec 19, 2016 at 8:17

Akshay Kumar

5762 silver badges10 bronze badges

3 Comments

prameela rani Over a year ago

for better understanding I gave options that are getting binded. actually all these comes from database not hardcoded

prameela rani Over a year ago

this is how we bind select html: function getData() { memAuditFactory.getData().then(function (response) { $scope.reasons = response.data.Reasons; }); }

prameela rani Over a year ago

Is it possible to use filter option? if so how to pass it from controller in above method?

Collectives™ on Stack Overflow

Remove select options based on button click in angular js

3 Answers 3

8 Comments

8 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related