Question

在我的应用程序中，我有一个选择html，其中包含以下选项＆＃34;添加＆＃34;，＆＃34;删除＆＃34;，＆＃34;复制＆＃34;，＆＃34;会员重复＆＃34;

上下拉页面对于添加和编辑屏幕都很常见。截至目前，如果我们来自任何添加点击或编辑点击下拉列表有所有选项。（注意：下拉页面在加载页面本身时会绑定。我们将根据点击显示/隐藏）

根据新要求，我需要删除所有其他选项，除了＆＃34; Addition＆＃34;另外点击并删除＆＃34;添加＆＃34;编辑中的选项单击。

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

如果您需要更多详细信息，请告诉我。

Answer 1

更新：

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

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

试试这个， HTML

.box{ text-align:center;}

JS

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

Answer 3

假设您有两个按钮，

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

选择框代码应该是，

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

希望这有帮助。

根据角度js中的按钮单击删除选择选项

3 个答案: