Remove choices based on angular js button click

Question

In my application, I have select html that has the following options: Add, Delete, Duplicate, Duplicate Member

The drop-down page is common to the add and edit screen. At the moment, if we start from any addition, click or edit the drop-down list of clicks. (Note: drop-down bindings during loading of the page itself. We will show / hide depending on the click)

In accordance with the new requirement, I need to delete all other parameters, except "Add", in addition, click and remove the "Add-on" option when editing.

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's a complete code example and a 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 In the console window

Answer 2

Try it, 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;} } } } 

Answer 3

Suppose you have two buttons:

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

And the code of the selection window should look like this:

 <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.