如何修改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

那个小提琴的想法很好,但我发现实施有点混乱.那么一个人能做什么呢？好吧,当然,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
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.

相关的Plunker http://plnkr.co/edit/bLWabx使用angularjs 1.4.0-beta.3和ui-bootstrap 0.12.0.