如何修改AngularJS Bootstrap下拉/选择以使其不使用jQuery？

发布时间：2020-12-17 06:57:39 所属栏目：安全来源：网络整理

导读：我看到了一个非常好的AngularJS Bootstrap类型的Select指令示例： http://jsfiddle.net/cojahmetov/3DS49/ 这满足了我的大多数需求,但它使用jQuery,我们没有使用该库. 这个例子中使用的jQuery非常小,但我不知道如何替换看起来像这样的元素定位器：任何人都

我看到了一个非常好的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以供其他人使用.

解决方法

那个小提琴的想法很好,但我发现实施有点混乱.那么一个人能做什么呢？好吧,当然,在ui-bootstrap之上写一个替代的下拉指令！

希望你觉得这很有帮助.它应该非常容易使用.

用法

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

所以你传入了包含初始选择的ng模型,如果有的话.从指令设置新值.在项目中,您可以选择id-name对的集合,如果需要,还可以使用回调函数.如果指定了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);
  };
});

下拉指令的逻辑非常简单,真的.

指令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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!