I am using a panel to display list of user and applying flex with ng-repeat but it's not working plz help me do this and i also want to implement scroll for this panel
this is my code:
<div class="form-group" ng-show="Employee">
<label class="col-xs-2 control-label"></label>
<div class="col-xs-6">
<div class="panel panel-primary panel-default" id="panel3">
<div class="panel-heading swpanel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseThree" href="" class="collapsed">Mobile EmployeeList:</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse col-xs-6">
<div layout="row" layout-wrap flex >
<div flex="50" ng-repeat="item in mobileEmployeeList">
<input type="checkbox" ng-checked="exists(item.rep_id, selectedEmployeeList)" ng-click="toggle(item.rep_id, selectedEmployeeList)">
{{ item.rep_name }}
<span ng-if="exists(item.rep_id, selectedEmployeeList)"></span>
</input>
</div>
</div>
</div>
</div>
</div>
</div>
it could be like that:
<md-content md-padding>
<md-list id="users-list" class="flex flex-col">
<ul class="flex flex-row full-width" ng-repeat="user in mobileEmployeeList">
<input flex="5" type="checkbox" ng-checked="exists(item.rep_id, selectedEmployeeList)" ng-click="toggle(item.rep_id, selectedEmployeeList)">{{ item.rep_name }}
<span ng-if="exists(item.rep_id, selectedEmployeeList)"></span>
<li flex="25" class="flex flex-col">{{user.name}}</li>
<li flex="25" class="flex flex-col">{{user.username}}</li>
</ul>
</md-list>
</md-content>
Related
I create add-to-cart app. I need each col in a row to display like it's mentioned col-lg-4 col-md-2 col-sm-6. But it's displayed in a column (Maybe it doesn't work because I added ng-repeat? And this style is the same for every item?
<h2 class="title">{{title}} <i class="em em-shopping_bags"></i></h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-2 col-sm-6">
<div class="card" style="width: 18rem;" ng-repeat='item in itemsArray'>
<img class="card-img-top" ng-src={{item.img}} alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">{{item.name}}</p>
<p class="price">{{ item.price | currency }}</p>
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3 home__li-align" ng-
repeat="electronic in allItem.slice(0,4) | filter :enter code here 'electronics'">
<a ui-sref="" ng-click="`enter code here`view(mobile)">
<img ng-src="../asset/img/{{electronic.image[0]}}" alt="Not Found" style="height: 200px;width:50%;" />
<div class="home__label-align">{{electronic.product_name}}</div>
<div class="home__label-align"> ₹: {{electronic.cost}}</div>
</a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3 home__li-align" ng-repeat="electronic in allItem.slice(4,8) | filter : 'electronics'">
<a ui-sref="" ng-click="view(mobile)">
<img ng-src="../asset/img/{{electronic.image[0]}}" alt="Not Found" style="height: 200px;width:50%;" />
<div class="home__label-align">{{electronic.product_name}}</div>
<div class="home__label-align"> ₹: {{electronic.cost}}</div>
</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="margin-bottom: 70px; margin-left: -70px; color: black;"><i class="glyphicon glyphicon-chevron-left" ></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="margin-bottom: 70px; margin-right: -70px; color: black;"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
Only item active class is working and i want 4 div in one slide of carousel then on clicking carousel control. It should bring next carousel having 4 div.So any Solution of that?
I can understand your problem and i created solution fiddle please follow below link.
<script>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl",MyCtrl);
function MyCtrl($scope) {
$scope.list = [];
for(var i = 0; i< 16;i++){
$scope.list.push(i);
}
}
</script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-3" style="height:100px; background:red; color:green; font-size:18px;" ng-repeat="l in list.slice(0,4)">
Hello {{l}}
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3" style="height:100px; background:red; color:green; font-size:18px;" ng-repeat="l in list.slice(4,8)">
Hello {{l}}
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 3">
<div class="carousel-caption">
Caption Slide 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
http://jsfiddle.net/r2wLz6xr/507/
I have problem with Bootstrap carousel in ng-repeat, because images are not load one by one if carousel changes, but all images are load all at onece. I found similar questions in stackoverflow, but in my case I loading data from database (not use $scope)
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The issue is that you are repeating all of your images inside an item of the carousel. A carousel item is defined by the "item" class. If you want a single image to displayed at once then repeat the items like so:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
<div class="row">
<div class="col-xs-3"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
I have a page to display my friends list for our web application. My problem is that I cant restrict the number of friends shown in one row. I have to display 3 friends in each row:
<div class="row" style="padding-left:200px;">
<div ng-repeat="favourite in favouriteData.data.result">
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="fav_image" >
<img ng-src='/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
<h4 class="aju_fav">{{favourite.username}}</h4>
<h4 class="aju_fav">{{favourite.city}}</h4>
<h4 class="aju_fav">Un-Favourite</h4>
<div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
</div>
</div>
</div>
plz help to resolve the issue
If you want to always display 3 columns per row (independently from the screen width) you can simply use col-xs-4 (enclosing in a <div class="row"> containing ng-repeat):
<div class="row" ng-repeat="favourite in favouriteData.data.result" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="fav_image">
<img ng-src='http://192.168.1.75/zentiera/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
<h4 class="aju_fav">{{favourite.username}}</h4>
<h4 class="aju_fav">{{favourite.city}}</h4>
<h4 class="aju_fav">Un-Favourite</h4>
<div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
</div>
</div>
The best way is to use 'limitTo' filter component in ng. Here is documentation
<div ng-repeat="favourite in favouriteData.data.result | limitTo:3">
this is my code..
<div class="container-fluid" id="con2">
<div class="row-fluid" id="row2">
<div ng-repeat="product in productDetails" class="row">
<div id="searchDiv1" class="col-lg-offset-1 col-lg-2 col-md-offset-1 col-md-2 col-sm-offset-2 col-sm-1 col-xs-offset-1 col-xs-2 padding-0" id="div21" >
<div class="Enlarge">
<img style="width:70px; height:70px;" class="center-block enlarge pull-right {{product.classInfo}}" ng-model="productImage" ng-src="{{product.documents.image}}">
<span> <img id="dataImage" ng-src="{{product.documents.image}}"></span>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-6 {{product.classInfo}}" id="div23">
<div id="p2" class="ng-binding "><a href="#" ng-click="openProductSheet(product.id)" >{{product.id}}</a></div>
<div id="p3" class="ng-binding" > {{product.descriptionTranslation}}</div>
</div>
</div>
</div>
The problem is that the same page is getting loading instead of link in new tab]
I saw some of the blogs of stackoverflow but not able to fix the problem.what is the mistake i am doing ?? any help is appreciable.
Thanks
Try changing the link by adding a target attribute:
<a href="#" target="_blank" ng-click="openProductSheet(product.id)" >{{product.id}}</a>