I have using carousel in my AngularJS App. I want change id of carousel each iteration but it is not working Please tell what did wrong?
<div ng-repeat="data in details">
<div class="carousel" id="{{data._id}}" style=" width: 290px;
max-width: 100% ;
height: 250px;">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="photo in data.photos">
{{$index}}
<a target="_blank" ui-sref="PhotoUpload">
<img src="{{ photo }}" style=" width: 290px;
max-width: 100% ;
height: 250px;">
</a>
</div>
</div>
<a class="left carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
First carousel image slide are working but after that second carousel images are not working if i click prev and next button first carousel images changing. but second images
Please help me.
I usually handle dynamic id values like this:
[attr.id]="data._id"
and for data-target
[attr.data-target]="'#' + data._id"
There must be possibilities your IDs are same for all elements. Please append {{$index}} within ID.
Try below snippet
id="{{data._id}}_{{$index}}"
I have created a nested accordian bootstrap panel. On clicking the parent(top most) panel heading - dropdown works fine but on clicking the child(sub panel heading) panel heading-dropdown wont work. I am retriving panel contents(sub panel heading and body) using angular $http.get rest api.
In this case, i think i did a mistake in syntax while linking the panel heading and panel body with its href and id attribute values( ng-href="{{productline_name}}" and id="{{productline_name}}" ).
Below code is placed inside top most panel body to create nested panel
<div class="panel-group col-lg-3" style="background-color:#505054;height:450px" id="accordion">
<div class="panel" style="background-color:#505054;color:#C1C1C1;border-bottom: 1px solid #eee;">
<h6>Clear Filter</h6>
</div>
<div class="panel" style="background-color:#505054;color:white;border-bottom: 1px solid white;">
<div class="panel-heading">
<h6>
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">PRODUCT</div>
</h6>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li class="panel-title"><a ng-click="cfilter('all')"><h5>All Records</h5></a></li>
<li ng-repeat="pline in detpline" class="panel-group" id="accordion2">
<div class="panel" style="background-color:#505054;color:white;border-bottom: 1px solid white;">
<div class="panel-heading" ng-click="plinefunc(pline.productline_name)">
<h6>
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" ng-href="{{productline_name}}">{{pline.productline_name}}</div>
</h6>
</div>
<div id="{{productline_name}}" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li class="panel-title" ng-repeat="prd in detp"><a ng-click="cfilter(prd.product_name)"><h5>{{prd.product_name}}</h5></a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Can any one help in this? what is the correct syntax to use to link panel heading and panel body via binding expresion?
Note: I am using binding expression for linking only to avoid opening all other sub panel heading contents on-clicking one of the sub panel heading.
I'm trying to get panels in a row to have equal heights regardless of content. I got this working fine using a basic bootstrap example, as in this example.
However, when I use angularjs to create the contents with data from the controller, using ng-repeat and ng-controller, this totally f***s it up, and the result looks horrible, with completely different results in firefox and google chrome.
The div using ng-controller and ng-repeat for some reason adds width to the content, so that instead of having 3 panels next to each other they are placed below each other (in firefox it's the opposite effect, and the div becomes 40px wide when it should be 400). When inspecting the result in chrome, the div has another directive "ng-scope", which I think is what is adding the width. The columns also does not appear to have equal height, like they should. When I remove the directives from the div and manually insert content, it works fine.
Does anyone know how to make flexbox work with angular, or maybe another way to get the columns to have equal height regardless of content?
View:
<div class="row row-flex row-flex-wrap" id="aktivitetsmodul">
<div class="col-md-12">
<h2 class="page-header">
Aktiviteter
</h2>
</div>
<div ng-controller ="AktivitetController" ng-repeat="aktivitet in aktiviteter | orderBy: '-navn'">
<div class="col-md-4" >
<div class="panel panel-default flex-col ">
<div class="panel-heading"> <h4> <a href="#" >{{aktivitet.navn}} </a> </h4> </div>
<div class="panel-body flex-grow ">
<span class="pull-left"> <img src="assets/img/logo.jpg" style="padding:0.3em" width="70px"/></span>
<p> {{aktivitet.beskrivelse}}</p>
</div>
<div class="panel-footer">
<span> {{aktivitet.fra}} <i> til </i> {{aktivitet.til}} </span>
<span class="pull-right glyphicon glyphicon-trash" style="margin-left:10px"> </span>
<span class="pull-right glyphicon glyphicon-edit"> </span>
</div>
</div>
</div>
</div>
</div>
Controller
(function(){
angular.module("Aktivitet",["ui.bootstrap",])
.controller('AktivitetController', function($scope){
$scope.aktiviteter = [
{"navn":"Pitchfork Etsy", "beskrivelse":"Squid Shoreditch direct trade, single-origin coffee banh mi cardigan kitsch cliche vegan seitan cornhole ethical mumblecore","fra":"09-12-2015","til":"20-03-2016"},
{"navn":"Occupy DIY","beskrivelse": "Farm-to-table organic flannel Brooklyn locavore. Gastropub normcore bitters, brunch YOLO sriracha tote bag fashion axe ennui iPhone bespoke. ","fra":"10-10-2015","til":"24-12-2015"},
{"navn":"McSweeney's Intelligentsia", "beskrivelse":"Aesthetic narwhal beard, Portland McSweeney's ethical Brooklyn Tumblr Marfa drinking vinegar sartorial Williamsburg. ","fra":"10-10-2015","til":"24-12-2015"},
{"navn":"Keffiyeh normcore", "beskrivelse":"irony quinoa vegan. Health goth retro ennui, kogi forage Odd Future ugh selfies.","til":"05-07-2012","fra":"12-04-2015"},
{"navn":"Master cleanse vegan iPhone","beskrivelse": " DIY umami occupy literally pork belly Austin biodiesel cred. Kale chips wolf fingerstache, you probably haven't heard of them messenger bag distillery whatever..","til":"01-01-2016","fra":"24-12-2015"},
{"navn":"Blue Bottle Kickstarter organic", "beskrivelse":"disrupt lo-fi plaid craft beer banh mi. Keffiyeh pickled church-key bicycle rights selvage. Vinyl brunch Banksy, Williamsburg fap iPhone ethical gluten-free meh raw denim VHS American Apparel semiotics. ","til":"05-07-2012","fra":"12-04-2015"}
]
})
})();
Angular wraps col-md-4 columns in one more div which stacks them one above the other. To remove it you should add this class to ng-repeat div:
<div class="col-md-4" ng-controller="AktivitetController" ng-repeat="aktivitet in aktiviteter | orderBy: '-navn'">
<!-- REMOVE THIS AND ADD THIS CLASS TO PARENT -->
<!-- div class="col-md-4" -->
<div class="panel panel-default flex-col ">
<div class="panel-heading"> <h4> <a href="#" >{{aktivitet.navn}} </a> </h4> </div>
<div class="panel-body flex-grow ">
<span class="pull-left"> <img src="assets/img/logo.jpg" style="padding:0.3em" width="70px"/></span>
<p> {{aktivitet.beskrivelse}}</p>
</div>
<div class="panel-footer">
<span> {{aktivitet.fra}} <i> til </i> {{aktivitet.til}} </span>
<span class="pull-right glyphicon glyphicon-trash" style="margin-left:10px"> </span>
<span class="pull-right glyphicon glyphicon-edit"> </span>
</div>
</div>
<!-- REMOVE THIS -->
<!--</div>-->
</div>
<header id="top-header">
<div class="row-fluid">
<div id="school-info" class="pull-left">
<span id="school-name" class="lead">THPT Hùng Vương</span>
<small> Học kỳ I năm 2013-2014</small>
</div>
<div id="user-info" class="pull-right">
<a href="/app/truong_hoc" title="Sửa thông tin người sử dụng, đổi mật khẩu, đổi tên tài khoản.">
<i class="icon-user"></i>
<span class="hidden-phone">
<small class="hidden-phone hidden-tablet">(truong_hoc)</small>
</span>
</a>
<a id="logout" href="/logout/" title="Thoát ra, kết thúc phiên làm việc. ">
<i class="icon-signout"></i>
<small class="hidden-phone hidden-tablet">Đăng xuất</small>
</a>
</div>
</div>
</header>
Logout element has an icon and a text. When I use Click Element icon use
xpath: "Click Element xpath=//a[#id='logout']/i"
it works, but when I use Click Element text use
xpath: "Click Element xpath=//a[#id='logout']/small"
it doesn't work. Help!
(Sorry because that website doesn't support English and I don't have enough reputation to post images)
I would like to use Angular data-binding to dynamically change the date used for Livestamp.
For instance, I would like to make the following dynamic:
<span data-livestamp="1413704094"></span>
by using Angular databinding, something like:
<span data-livestamp="{{item.Date.toISOString}}"></span>
How do I do it? The above code doesn't work.
EDIT:
Here's how it's used:
<div class="panel panel-default messageItems" ng-repeat="item in vm.itemsTop | orderBy:'Id':true" ng-animate="'animate'">
<div class="panel-body">
<div class="media">
<a class="pull-left" href="/People/{{item.User.Username}}">
<img class="media-object"
src="http://mysite/{{item.User.Username}})/avatar"
alt="{{item.User.Username}}" />
</a>
<div class="media-body">
<h4 class="media-heading">
<span ng-bind="item.User.Username"></span>
</h4>
<h6>
posted <span data-livestamp="{{item.Posted.toISOString}}"></span> (<span ng-bind="item.Posted.toUTCString()"></span>)
</h6>
<p class="emojstext">
<span ng-bind="item.Text"></span>
</p>
</div>
</div>
</div>