javascript - 使用 Angular js 进行轮播 Bootstrap

标签 javascript css angularjs twitter-bootstrap carousel

我需要使用带有两个预定义模板的 Bootstrap 中的轮播。当我按下右侧的按钮时,以及当我按下左侧的按钮滑回时间模板时,我需要轮播显示品牌选项卡。任何人都可以帮助我如何在我的情况下使用 Angular 旋转木马。这是我的 HTML

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
     <div class="item active">
         <div class="col-xs-6">
             <div class="container row">
                 <label class="form-group lable-margin">Date</lable>
             </div>
            <div class="container row">
               <label class="form-group">From: </label> [[stuff.filtersAll.START_DATE]]
            </div>
         <div class="container row">
              <label class="form-group">To: </label> [[stuff.filtersAll.END_DATE]]
         </div>
      </div>
      <div class="col-xs-6">
           <div class="container row">
               <label class="form-group lable-margin">Time</label>
           </div>
           <div class="container row">
               <label class="form-group">From: </label> [[stuff.filtersAll.TIME_FROM]]
           </div>
        <div class="container row">
              <label class="form-group">To: </label> [[stuff.filtersAll.TIME_TO]]
        </div>
    </div>
 </div>
    <div class="item">
           <ul class="list-group" ng-repeat="brads in stuff.filtersAll.BRAND">
              <li class="list-group-item">[[brand.NAME]]</li>
           </ul>
       </div>
   </div>

最佳答案

Angular 没有任何用于右键单击的构建选项。只需点击。但是您可以为右键单击

创建这样的指令
app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
}); 

对于左键单击,请使用常规的 ng-click。在你的html代码中这样写

<div ng-click="doWhenLeftClick()" ng-right-click="doWhenRightClick()">
    // you html code hear
</div> 

关于javascript - 使用 Angular js 进行轮播 Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39366440/

相关文章:

javascript - 意外 'continue'

javascript - 在复杂的脚本上使用 .on

javascript - Mongoose 的正则表达式不传递不从Angular的HTTP服务传递到nodejs

javascript - JQuery 不显示/隐藏元素

javascript - 客户端开发 - 进行中/已完成指标首选项?

html - 表格单元格宽度不适用于一个单元格!我该如何解决?

html - 如何使主页 slider 完全适合所有屏幕

css - 添加静态文件目录以覆盖 Django 中的 CSS

angularjs - 套接字编程 MEAN 堆栈、端口 3000 上的 Express 应用程序和端口 8000 上的 Angular 应用程序

javascript - 对 Bootstrap 模态使用不同的 Angular Controller