I'm trying to apply ng-repeat to the cols here marked with the class "company". I'm unable to do so because "row" breaks the sequence in between.
I need to show over 1000+ such companies. How should I proceed?
<div class="row">
<div class="col-sm-6 col-xs-12 company">
<small>Users</small>
<small>Followers</small>
</div>
<div class="col-sm-6 col-xs-12 company">
<small>Users</small>
<small>Followers</small>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12 company">
<small>users</small>
<small>Followers</small>
</div>
<div class="col-sm-6 col-xs-12 company">
<small>users</small>
<small>Followers</small>
</div>
</div>
Try
<div class="row" ng-repeat="i in getNumber(1000)">
<div class="col-sm-6 col-xs-12 company">
<small>users</small>
<small>Followers</small>
</div>
<div class="col-sm-6 col-xs-12 company">
<small>users</small>
<small>Followers</small>
</div>
</div>
In controller
$scope.getNumber = function(num) {
return new Array(num);
}
If you are trying to repeat the .company element, then you should apply the ng-repeat on the .company element.
<div class="row">
<div class="col-sm-6 col-xs-12 company" ng-repeat="i in getNumber(1000)">
<small>users</small>
<small>Followers</small>
<small>...</small>
</div>
</div>
If you are worried about .col-sm-6 not wrapping to the next row for the 3rd+ elements, bootstrap and the browsers are smart to wrap them to the next line. See JSFiddle here - http://jsfiddle.net/s0x7v41p/1/.
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>
I am getting started with angularjs and started working on a simple example. Overall I didn't ran into big challenges so far but this one i couldn't figure out... I have some $scope variables defined like this:
'use strict';
angular.module('portalApp')
.controller('summaryController', ['$scope', function ($scope) {
$scope.todayProduction = '8';
$scope.yesterdayProduction = '20';
$scope.monthlyProduction = '500';
$scope.dockedVessels = '16';
}]);
and this is my view html
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div>
<span class="glyphicon glyphicon-stats" style="font-size: 50px;float: right;"></span>
<div>Today's Production</div>
<div style="font-size: 24px;">{{todayProduction}}<span style="font-size: 12px;"> tons</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div>
<span class="glyphicon glyphicon-stats" style="font-size: 50px;float: right;"></span>
<div>Yesterdays's Production</div>
<div style="font-size: 24px;">{{yesterdayProduction}}<span style="font-size: 12px;"> tons</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div>
<span class="glyphicon glyphicon-stats" style="font-size: 50px;float: right;"></span>
<div>Monthly Production</div>
<div style="font-size: 24px;">{{monthlyProduction}}<span style="font-size: 12px;"> tons</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div>
<span class="glyphicon glyphicon-stats" style="font-size: 50px;float: right;"></span>
<div>Docked Vessels</div>
<div style="font-size: 24px;">{{dockedVessels}}<span style="font-size: 12px;"> tons</span></div>
</div>
</div>
</div>
</div>
</div>
The problem is that when rendering I see the glyphicon as expected but instead of displaying the variable values I get "{{variableName}}" for all of them.
As a background the sample project I am using was originally for 1.5 version but I'm running a 1.6
Thanks in advance for your help!!
Change {{monthlyProduc tion}} to {{monthlyProduction}} in your html.
am new to angularjs.
I want to change the text of single button within ng-repeat after successful POST request.
html code
<div class="row req-content-container" ng-show="selectedTopic">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 create-immediate-meeting-list-container" align="center" ng-repeat="item in allKOL">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img class="profile-image-small" ng-src="{{imagesrc}}{{item.photo}}">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" valign="middle">
<div class="row"><b><span class="pull-left">{{item.firstName}} {{item.lastName}}</span></b><br></div>
<div class="row"><b>Speciality</b><br>{{item.speciality}} </div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row"> </div>
<div class="row"><b>Location</b><br>{{item.city}}</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="row"> </div>
<div class="row"><b>Convenient Hours</b><br>{{item.fromAvailable}} to {{item.toAvailable}}</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button type="button" class="btn margin-top-10 request-button-style" ng-click="sendRequest(item.id)">{{sendRequestButtonStatus}}</button>
</div>
</div>
</div>
From controller, am setting the button text to "Send Request" initially and i want it to show "awaiting Request" after successful POST request, but doing this all the buttons text are changing to "awaiting Request". I tried to sort it out but couldn't, can i get any help..
Controller
RequestAMeetingService.immediateMeetWithDoctor(payload, function (result) {
if(result.success) {
$localStorage.immediateMeetingID = result.data.data.meeting;
console.log($localStorage.immediateMeetingID);
console.log(result.data.data);
$scope.closeThisDialog();
$scope.sendRequestButtonStatus = "Awaiting Request";
AlertService.addSuccess(result.data.data.message);
}
else
{
AlertService.addError(result.data.data.err);
}
})
In that case , you have to define a buttons array , with the initial text as Send Request.
var buttonArray = ["Send Request"]; // array should match your ng-repeat length
Modify your ng-click method of your button such that it sends $index as the second argument.Then in your success modify the text according to index.
$scope.buttonArray[index] = "Awaiting Request";
This should be your html
<div class="row req-content-container" ng-show="selectedTopic">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 create-immediate-meeting-list-container" align="center" ng-repeat="item in allKOL">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img class="profile-image-small" ng-src="{{imagesrc}}{{item.photo}}">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" valign="middle">
<div class="row"><b><span class="pull-left">{{item.firstName}} {{item.lastName}}</span></b><br></div>
<div class="row"><b>Speciality</b><br>{{item.speciality}} </div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row"> </div>
<div class="row"><b>Location</b><br>{{item.city}}</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="row"> </div>
<div class="row"><b>Convenient Hours</b><br>{{item.fromAvailable}} to {{item.toAvailable}}</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button type="button" class="btn margin-top-10 request-button-style" ng-click="sendRequest(item.id, $index)">{{ buttonArray[$index] }}</button>
</div>
</div>
I have a panel header which I have divided into 2 parts.
when I click on one panel then its background is sky blue and text color is white while other panel background is gray with black text color and clicking on that panel background and text color is changed alternatively.
.prefix_event {
text-align: center;
background: #f2f1f1;
color: #555555;
padding: 10px;
font-size: 12px;
}
.prefix_previous {
text-align: center;
background: #24b6e3;
color: #FFFFFF;
padding: 10px;
font-size: 12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="panel panel-default set_padding_0 set_margin_0">
<div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
<div class="row set_margin_0">
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous" ng-click="option='event_exhibitors'" ng-init="option='event_exhibitors'">
Event Exhibitors
</div>
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event" ng-click="option='previous_exhibitors'">
Previous Exhibitors
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='event_exhibitors'">
<div class="row ">
<div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search search_icon_color"></i>
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='previous_exhibitors'">
<div class="row ">
<p>Previous Exhibitors</p>
<p>Previous Exhibitors</p>
</div>
</div>
</div>
</div>
</div>
what i want is. when clicking on previous exhibitors panel. the background color and text color of event exhibitors should be given to previous exhibitors and event_exhibitors should get previous exhibitors background and text color. so it will be vice versa CSS on click.
Any help would be great.
Its very simple using the toggle option like this in the
$scope.toggle="false";
Your HTML will be like this
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="panel panel-default set_padding_0 set_margin_0">
<div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
<div class="row set_margin_0">
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous"
ng-click="toggle = !toggle"
ng-class="{prefix_event : toggle, prefix_previous : !toggle}"
>
Event Exhibitors
</div>
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event"
ng-click="toggle = !toggle"
ng-class="{'prefix_previous' : toggle}"
>
Previous Exhibitors
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='event_exhibitors'">
<div class="row ">
<div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search search_icon_color"></i>
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='previous_exhibitors'">
<div class="row ">
<p>Previous Exhibitors</p>
<p>Previous Exhibitors</p>
</div>
</div>
</div>
</div>
</div>
DEMO
UPDATE 1 : Also check the modified plunker in the same link
Change these # Previous Exhibitors
<div class="panel-body" ng-show="!toggle">
Change these # Event Exhibitors
<div class="panel-body" ng-show="toggle">
you can achieve this functionality with simple Jquery.
Change colour of table row onclick
and if you use class="col-xs-12" then it overrides other higher sizes as well and make them 12(col-sm-12,col-md-12,col-lg-12).
http://getbootstrap.com/css/#grid
I am working with the code below and trying to determine what makes the cols stack on one another. The code looks fine in desktop view, but when I look at it on mobile, the last two col-xs-12 stack together right on top of one another. Is there a break code to make it put a hard return between the two col's in mobile viewing?
<div class="panel panel-default">
<div class="panel-body2">
<div class="row vertical-align">
<div class="col-xs-6 col-sm-3">
<h5><small>Saturday<br>
</small>Feb. 13</h5>
</div>
<div class="col-xs-6 col-sm-3 text-right">
<h5><small>TCU<br>
</small>Horned Frogs</h5>
</div>
<div class="hidden-xs col-sm-3 text-left">
<img src="http://www.wvusports.com/content/images/graphics/logos/TCU.png" width="45">
</div>
<div class="col-xs-12 col-sm-3 text-center">
<span class="label label-warning"><i class="fa fa-ticket"></i> ON SALE SOON</span>
<div>
<img class="hidden-xs" style="padding-top:2px" src="http://www.wvusports.com/content/images/graphics/logos/Big12.png" width="25">
</div>
</div>
<div class="col-xs-12">
<div class="alert alert-success" role="alert">Family Day - $70</div>
</div>
</div>
</div>
</div>