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.
Related
I am trying use ng-animate so far without success. I animate different part of my program and everything is working fine. But in this part I don't know what directive I shout use. I tried #singleQuestionAnswer.ng-enter .. ng-leave but didn't work.
<div class="row" id="singleQuestionAnswer">
<div class="column" >
<h3>$ctrl.quizQuestions[$ctrl.activeQuestion].question}}</h3>
<div class="row">
<div layout="column" ng-repeat="answer in $ctrl.answers">
<div class="answer" layout-padding>
<md-checkbox ng-checked="$ctrl.existAnswer(answer, $ctrl.answersSelected)" >
{{answer}}
</md-checkbox>
</div>
</div>
</div>
</div>
</div>
<md-button ng-click="$ctrl.answered($ctrl.active)" >Submit answer</md-button>
The dirpagination works because it gives 10 items per row but I am not able to see the controls at the bottom of table to navigate.
//Creating tabs and table
<div ng-controller="MyController" class="my-controller">
<div class="container">
<h2>Legislaotrs</h2>
<ul class="nav nav-tabs">
<li>By State</li>
<li>House</li>
<li>Senate</li></ul>
</div>
<form class="form-inline">
<div class="form-group">
<label >Search</label>
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
//setting pagination controls
<div id="paginate">
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true">
</dir-pagination-controls></div>
</div>
First you need to include the module in your project:
angular.module('myApp', ['angularUtils.directives.dirPagination']);
Then create the paginated content:
<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]>
</dir-pagination-controls>
here is working plunker
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 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
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.