angularjs - 如何修改AngularJS Bootstrap下拉列表/选择框，使其不使用jQuery？

Question

我看到了一个很好的AngularJS Bootstrap类型的Select指令示例:

http://jsfiddle.net/cojahmetov/3DS49/

这可以满足我的大多数需求，但是它使用jQuery，而我们没有使用该库。

此示例中使用的jQuery非常少，但我不知道如何替换看起来像这样的元素定位器:

任何人都可以给我有关如何替换此方法的任何指示:

switch (attrs.menuType) {
  case "button":
    $('button.button-label', element).html(item.name);
    break;
  default:
    $('a.dropdown-toggle', element).html('<b class="caret"></b> ' + item.name);
    break;
}

这样就可以在没有jQuery的情况下工作？理想情况下，我希望有人知道足够多，以便根据ui-bootstrap中的版本提出一个版本。也许这甚至可以添加到ui-bootstrap中供其他人使用。

Answer 1

Fiddle的想法很好，但是我发现实现有点困惑。那怎么办？好吧，当然，在dropdown之上编写另一个ui-bootstrap指令!

希望对您有所帮助。它应该真的很容易使用。

用法

<dropdown is-button 
          ng-model="vm.item" 
          items="vm.items" 
          callback="vm.callback(item)">
</dropdown>

因此，您传递了保留初始选择的ng-model(如果有的话)。从指令设置新值。在items中，您可以选择id-name对的集合，并在需要时使用callback函数。如果指定is-button属性，则将获得一个按钮样式的下拉控件。

然后， Controller 可能如下所示。

Controller

// Controller
app.controller('Ctrl', function() {
  var vm = this;

  // items collection
  vm.items = [{
      id: 0,
      name: 'London'
    },{
      id: 1,
      name: 'Paris'
    },{
      id: 2,
      name: 'Milan'
    }];

  // current item
  vm.item = null; // vm.items[1];

  // directive callback function    
  vm.callback = function(item) {
    vm.fromCallback = 'User selected ' + angular.toJson(item);
  };
});

实际上，dropdown指令的逻辑非常简单。

指令javaScript

// Dropdown directive 
app.directive('dropdown', function() {
  return {
    restrict: 'E',
    require: '^ngModel',
    scope: {
      ngModel: '=', // selection
      items: '=',   // items to select from
      callback: '&' // callback
    },
    link: function(scope, element, attrs) {
      element.on('click', function(event) {
        event.preventDefault();
      });

      scope.default = 'Please select item';
      scope.isButton = 'isButton' in attrs;

      // selection changed handler
      scope.select = function(item) {
        scope.ngModel = item;
        if (scope.callback) {
          scope.callback({ item: item });
        }
      };
    },
    templateUrl: 'dropdown-template.html'
  };
});

指令HTML模板

<div class="btn-group" dropdown>

  <!-- button style dropdown -->
  <button ng-if="isButton" 
          type="button" 
          class="btn btn-primary"
          ng-bind="ngModel.name || default">
  </button>
  <button ng-if="isButton" 
          type="button" 
          class="btn btn-primary dropdown-toggle" 
          dropdown-toggle>
    <span class="caret"></span>
  </button>

  <!-- no button, plz -->
  <a ng-if="!isButton" 
     class="dropdown-toggle"
     dropdown-toggle href
     ng-bind="ngModel.name || default">
  </a>
  <span ng-if="!isButton" class="caret"></span>

  <!-- dropdown items -->
  <ul class="dropdown-menu" role="menu"> 
    <li ng-repeat="item in items">
      <a href="#" 
         ng-bind="item.name" 
         ng-click="select(item)"></a>
    </li> 
  </ul>

</div>

这是初始实现的外观。除了提供的示例之外，您还将获得整个对象，而不仅仅是id。

在这里使用angularjs 1.4.0-beta.3和ui-bootstrap 0.12.0来关联Plunker http://plnkr.co/edit/bLWabx。