Question

我正在开展一个项目，我有一个详细列表。我需要在删除按钮单击时给出一个下拉选项。我尝试了但无法显示ng-repeat内的下拉列表。任何人都可以指导我如何实现这一目标。

我想在点击删除按钮时显示一个下拉列表。

以下是我尝试过但没有结果的代码：

<i class="fa fa-download tooltipped dropdown-button" data-activates='deleteList{{u.$index}}' data-position="top" data-tooltip="Downloads" aria-hidden="true" tooltip-loader></i>

<ul id='deleteList{{u.$index}}' class='dropdown-content' style="">

  <li><a ng-click="deleteAll();">Delete all</a>
  </li>
  <li><a ng-click="deleteSelected();">Delete only selected</a>
  </li>

</ul>

Fiddle

Answer 1

我为下拉列表创建了演示：

<强> HTML：

<button ng-model="show" ng-click="show=!show">
delete
</button>
<ul ng-show="show">
<li>Delete all</li>
<li>Delete only selected</li>
</ul>

<强>的CSS：

ul{
  padding:0;
  margin:0;
  border:1px solid #a6a6a6;
  width:150px;
}
li{
  list-style-type:none;
  cursor:pointer;
}
li:hover{
  background-color:#b3b3b3;
}

这是jsfiddle：Demo

ng-repeat下拉列表

这里是你的jsfiddle的完整解决方案： http://jsfiddle.net/eP7T8/116/

Answer 2

检查此解决方案，我希望这是您正在寻找的

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.items = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ];
    
    vm.deleteItem = deleteItem;
    
    function deleteItem(option, itemId) {
      console.clear();
      console.log(option);
      console.log(itemId);
    }
  }

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <ul>
      <li ng-repeat="item in ctrl.items">
        <span ng-bind="item.name"></span>
        <button ng-click="item.delete = true">Delete</button>
        <select ng-show="item.delete" ng-options="option for option in ['Delete All', 'Delete Selected']" ng-model="ctrl.deleteOption" ng-change="ctrl.deleteItem(ctrl.deleteOption, item.id)">
          <option value="">Select</option>
        </select>
      </li>
    </ul>
  </div>
</div>

Answer 3

如果您在应用程序中使用UI-Bootstrap，请使用UIB Dropdown。

脚本和HTML将如下所示：

＆＃13;

  $scope.status = {
    isopen: false
  };
  
  $scope.options = [{
    name: "Delete Selected"
  },
  {
    name: "Delete All"
  }];
  
  $scope.delete = function(name){
    alert(name);
  }

＆＃13;

<div class="btn-group" uib-dropdown is-open="status.isopen">
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
    Delete <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li ng-repeat="op in options" role="menuitem" ng-click="delete(op.name)"><a href="#">{{op.name}}</a></li>
  </ul>
</div>

＆＃13;

此外，我还修改了角度的UIB Dropdown plunker。你可以在这里查看： Dropdown Plunker

如何在ng-repeat中显示下拉列表

3 个答案: