根据Angular JS中的按钮单击删除选择选项 [英] Remove select options based on button click in angular js

问题描述

在我的应用中，我有一个选择html，它具有以下选项 添加"，删除"，重复"，成员重复"

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.

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

推荐答案

更新

这里是完整的示例代码和带有虚拟数据的演示.

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

> 在控制台窗口上工作演示

这篇关于根据Angular JS中的按钮单击删除选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！