I'm losing my mind with this code:
<div class=" col-md-3 col-lg-2 hidden-xs hidden-sm">
<div class="panel-group" id="mainMenuCollapsible">
<div ng-repeat="item in menuItems">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#mainMenuCollapsible" href="#collapse_{{ $index }}">
{{ item }}
</a>
</h4>
</div>
<div id="collapse_{{ $index }}" class="panel-collapse collapse" >
<div class="panel-body">
BLA BL
</div>
</div>
</div>
</div>
</div>
</div>
There no chance to get this working. When I click the title of any panels page reloads showing the panel selected but with no visual effects. My code is exactly the same as bootstrap example.
I have all jss in the right place (jquery 2.0.3, bootstrap.min 3.0.2, angular 1.2).
I also tried removing ng-repeat and doing with a single panel with no luck. What am I missing? Many thanks.
Solved my self. It's angular that intercept the route #collapse_X. Using data-target instead of href:
data-target="#collapse_{{ $index }}"
solved perfectly!
Hope this helps someone.
Related
I am trying to use an ng-repeat inside a Semantic UI accordion. However, once I included ng-repeat inside the div tag with the accordion class, the accordion doesn't open nor close anymore. Clicking it doesn't do anything.
The accordion works properly here:
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> Filename
</div>
<div class="content">
<a>File Link</a>
</div>
</div>
The accordion breaks once I include ng-repeat:
<div ng-repeat="file in files" class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> Filename
</div>
<div class="content">
<a>File Link</a>
</div>
</div>
I need to include the ng-repeat inside the accordion, and I need the accordion to do what it's supposed to do. Any help will be very much appreciated. Thank you!
<div class="ui styled accordion">
<div ng-repeat="file in files">
<div class="title">
...
ng-repeat and semantic ui needs to be separated
I am using ionic -v1 for my app. This is my code for showing data in two side by side columns.
<div class="row">
<div class="col col-50" ng-repeat="news in mainCtrl.content.sources">
<article class="item">
<a class="item item-thumbnail-left" href="{{news.url}}">
<img ng-src="{{news.urlsToLogos.medium}}">
<h2>{{news.name}}</h2>
<p>{{news.description}}</p>
</a>
</article>
</div>
The problem is it is showing only two results.
Can u please tell me y is that and how to fix this.?
And how can i use image-cards instead of article.?
i have use when two column display
angular-masonry
the demo follow this Link
if you implement then you can use image-cards instead of article
Your code something like that after implement the angular-masonry
<div masonry class="row">
<div class="col col-50" ng-repeat="news in mainCtrl.content.sources">
<article class="item">
<a class="item item-thumbnail-left" href="{{news.url}}">
<img ng-src="{{news.urlsToLogos.medium}}">
<h2>{{news.name}}</h2>
<p>{{news.description}}</p>
</a>
</article>
</div>
I'm using two plugins to achieve this but it doesn't work perfectly. The two plugins are angulargrid, and slick-carousel. Does anyone know of a plugin that does both these in one?
Here is what I have with using both plugins, its almost good enough except that the carousel causes gaps between the grid items until the window is resized after the page first loads. Can anyone get this to work without any hiccups?
<ul class="dynamic-grid" angular-grid="vm.stories" ag-grid-width="400" ag-gutter-size="20" ag-id="gallery">
<li data-ng-repeat="story in vm.stories" class="grid">
<!--Carousel-->
<slick fade="true" dots="true" ng-style="vm.imageStyle" ng-show="story.images.length > 0" ng-class="{'showImages': story.images.length > 0}">
<div ng-repeat="image in story.images">
<img class="carousel-image" data-lazy="{{ image.filename }}" aria-label="Image" ng-style="vm.imageStyle">
</div>
</slick>
</li>
</ul>
Have you tried this awesome carousel . You can change the perspective to make images as a grid.
Was able to get it to work by using divs. Heres what I have, which also uses infinite scroll.
<div ng-cloak="" layout="column" layout-fill>
<md-content id="content-scroller">
<div>
<div
class="cards-wrap"
angular-grid="vm.stories"
ag-grid-width="400"
ag-gutter-size="20"
ag-id="gallery"
ag-scroll-container="'#content-scroller'"
ag-infinite-scroll="vm.loadMoreStories()"
performantScroll="true">
<div class="card" ng-repeat="story in vm.stories">
<slick fade="true" dots="true">
<div ng-repeat="image in story.images">
<img data-lazy="{{ image.filename}}" aria-label="Image">
</div>
</slick>
<div class="inside">
<h3>{{story.title}}</h3>
<div class="description">{{ story.text }}</div>
</div>
</div>
</div>
<div class="loading-more-indicator" ng-show="vm.loadingMore">
<md-progress-circular md-mode="indeterminate" md-diameter="64" class="progress-swatch"></md-progress-circular>
</div>
</div>
</md-content>
<div>
I am trying to get a nice border around each of an array of uploaded images.
I have tried bootstrap panels and can get them working in Plunker.
However when I try to apply the same code in my angular app it doesn't work - no panel appears:
<div ng-repeat="f in files track by $index">
<div ng-show="f.type.indexOf('image') > -1">
<div class="panel panel-primary">
<img ngf-src="f" class="thumb">
<button class= "btn btn-warning btn-cancel" ng-disabled="!myForm.$valid"
ng-click="cancelPic($index)">Cancel</button>
<br><br>
<p>{{f.name}}</p>
<br>
<span class="progress" ng-show="f.progress >= 0">
<div style="width:{{f.progress}}%"
ng-bind="f.progress + '%'"></div>
</span>
</div>
</div>
</div>
I guess there is an obvious reason for this but I have no luck in finding it.
I am using angular 1.4.3 and bootstrap 3.3.1 same as the Plunk
I was missing the .panel-body class, like:
<div class="panel panel-default">
<div class="panel-body">A panel</div>
</div>
It is strange how I didn't need the .panel-body class in the Plunk but when I added it to the app it started working. C'est la vie.
I found this accordion effect which works very nicely: http://angular-ui.github.io/bootstrap/
But I need the accordion to open differently, so that the content of each accordion-group appears above the accordion-header that opens it. Just wondering if anyone knows a simple way to accomplish this or if I'll have to make my own custom accordion.
The UIBootstrap accordion does not support having the panel content above the title by default.
Below is the accordion-group.html template, which is the HTML for each panel. As you can see there is currently no logic to cover your use case.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
</div>
https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html
However, it should be fairly simply to modify this file to have the title below the content. Simply change this template to have the divs in the order you prefer.
<div class="panel panel-default">
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
</div>
I would suggest taking a fork of the repository on GitHub, so you can make your changes without losing the benefits of version control. http://github.com/angular-ui/bootstrap