progress bar error in angular bootstrap application - javascript

I have the following angular app:
<!DOCTYPE html>
<html ng-app="StudentProgram">
<head>
<title>Student Program Management</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/badge.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel col-lg-3 col-md-3 col-sm-2">
<div ng-controller="mylistcontroller" class="" id="menu">
<br/>
<h4><font color=#636363>My Academic Programs</font><button id="tooltip1" type="button" class="btn btn-default pull-right" data-toggle="tooltip" data-placement="right" data-original-title="Add a Program"><span class="glyphicon glyphicon-plus-sign pull-right"></span></button></h4>
<div ng-repeat="prog in programs" class="list-group">
<a ng-repeat="list in prog.programstaken" href="#" class="list-group-item">
{{list.program}}<span class="badge badge-info pull-right">{{list.completed}} / {{list.required}}</span>
<div class="progress progress-striped">
<div class="progress-bar" ng-class="{'progress-bar-danger': getPercentage()<40, 'progress-bar-info': getPercentage()>=40 && getPercentage()<70, 'progress-bar-success': getPercentage()>=70}" role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="{width:(getPercentage()+'%')}">
{{getPercentage()}}%
</div>
</div>
</a>
<!-- <a href="#" class="list-group-item">
AA.ARTS<span class="badge badge-info pull-right">29 / 60</span>
<div class="progress progress-striped">
<div class="progress-bar" role="progressbar" aria-valuenow="48.3" aria-valuemin="0" aria-valuemax="100" style="width: 48.3%;">
48.3%
</div>
</div>
</a> -->
</div>
</div>
<br/><br/>
</div>
</div>
<script id="tooltipid" type="text/javascript">
$(document).ready(function() {
$('#tooltip1').tooltip();
});
</script>
<script src="js/bootstrap.js"></script>
<script>
var app = angular.module('StudentProgram', ['ui.bootstrap']);
app.controller('mylistcontroller', function($scope, $modal, $log){
$scope.programs=[{programlist:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"},
{program:"AAS.BUSI.ADMIN", completed:"0", required:"60"},
{program:"AAS.MANAGEMENT", completed:"0", required:"60"},
{program:"AS.FS.BUSINESS", completed:"0", required:"60"},
{program:"AAS.NURSING", completed:"0", required:"60"}],
programstaken:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"}]}
];
$scope.getPercentage = function () {
return (($scope.programstaken.completed)/($scope.programstaken.required)*100).toFixed(2);
}
});
</script>
<br/>
</div>
</body>
</html>
The progress bar is not getting the value for the getPercentage() function. Where is my error?

The following are the problems that I've noticed in the code above:
You are trying to access the completed and required property of each repeated item of your programstaken array without providing a reference of the current item.
You didn't use the angular-ui progressbar directve and its properties max, value, and type to manipulate angular-ui's progressbar.
You can place your logic in a controller function to determine the percentage and the progressbar color to assign to the type property of the progressbar directive.
Solution:
1 Create controller functions with an access to the current reference of the repeated item, e.g. add a parameter as a reference to such function.
2. Make use of the angular-ui progressbar directives' properties by assigning them with the programstaken item properties. Create a controller function to determine the progressbar color considering what I mentioned in 1.
max = required
value = completed
type = getProgressType()
See this PLUNKER for the live demo.
HTML
change
<div class="progress progress-striped">
<div class="progress-bar" ng-class="{'progress-bar-danger': getPercentage()<40, 'progress-bar-info': getPercentage()>=40 && getPercentage()<70, 'progress-bar-success': getPercentage()>=70}" role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="{width:(getPercentage()+'%')}">
{{getPercentage()}}%
</div>
</div>
to
<progressbar class="progress-striped active" max="list.required" value="list.completed" type="{{getProgressType(list)}}">{{getPercentage(list)}}%</progressbar>
JAVASCRIPT
change
$scope.getPercentage = function () {
return (($scope.programstaken.completed)/($scope.programstaken.required)*100).toFixed(2);
}
to
$scope.getPercentage = function(item) {
return ((item.completed / item.required) * 100.00).toFixed(2);
};
$scope.getProgressType = function(item) {
var percent = $scope.getPercentage(item);
if(percent < 40) return 'danger';
if(percent < 70) return 'info';
return 'success';
};

$scope.programstaken isn't being defined.
programstaken is buried within an Array called $scope.programs and the array syntax is broken.
I think what you want is for $scope.programs to be an Object:
$scope.programs={
programlist:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"},
{program:"AAS.BUSI.ADMIN", completed:"0", required:"60"},
{program:"AAS.MANAGEMENT", completed:"0", required:"60"},
{program:"AS.FS.BUSINESS", completed:"0", required:"60"},
{program:"AAS.NURSING", completed:"0", required:"60"}
],
programstaken:[
{program:"AS.SCIENCE", completed:"32", required:"60"},
{program:"AA.ARTS", completed:"29", required:"60"}
]
};
then you would access it as $scope.programs.programstaken rather than $scope.programstaken

Related

AngularJS Single Page App: Reference Error, ____ is not defined

In my Single Page App, specifically in the javascript file I am getting an error for uncaught reference for the reroll function. I do not understand what is causing this issue. Is my js file setup the wrong way?
The specific error stated is, Reference Error, reroll is not defined.
HTML:
<body ng-app="app">
<!-- == Main Controller for SPA == -->
<div class="container-fluid bg-dark text-white" style="height:700px" ng-controller="mainCtrl">
<!-- == App Title == -->
<h2 class="display-2 title-container text-center">{{main.title}}</h2>
<div class="row">
<div class="container-fluid word-container text-center">
<!-- == User Phrase Input == -->
<input type="text" ng-model="word" placeholder="Please enter word">
<br>
<br>
</div>
</div>
<div class="row">
<div class="container-fluid anagram-container text-center">
<!-- == Final anagram == -->
Anagram: {{anagram}}
</div>
</div>
<div class="row">
<div class="container-fluid button-container text-center">
<!-- Anagram "Reroll" Button -->
<button type="button" ng-click="reroll(word)" class="btn btn-primary btn-large">Reroll</button>
<!-- Anagram "Clear" Button -->
<button type="button" class="btn btn-primary btn-large" ng-click="word=''">Clear</button>
</div>
</div>
</div>
</body>
Javascript:
var app = angular.module("app", []);
app.controller('mainCtrl', function($scope) {
$scope.main = {};
$scope.main.title = "AnagramJS";
$scope.reroll = function reroll(value) {
// set anagram to randomize
$scope.anagram = value.split('').sort(function() {
return 0.5 - Math.random()
}).join('');
};
$scope.$watch('word', (newVal, oldVal) => {
if (newVal) {
reroll(newVal);
} else {
// empty anagram if word is empty
$scope.anagram = "";
}
});
angular.extend($scope, {
reroll
});
});
reroll(newVal) should be $scope.reroll(newVal);
Also remove the
angular.extend($scope, {
reroll
});

Calling a function using ng-init inside ng-repeat only gets the result of the last item in the loop

I am trying to change a progress bar content for each line in my table. To do so I used ng-init inside ng-repeat here is my code :
The view :
<tr ng-repeat-start="p in projetsListe" ng-init={{progressBar($index)}}>
<td>
<button class="btn btn-info btn-sm" ng-click="p.expanded = !p.expanded" expand data-toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">
<span ng-bind="p.expanded ? '-' : '+'"></span>
</button>
</td>
<td>{{p.NomProjet}}</td>
<td>{{p.Responsable}}</td>
<td>{{trestant[$index]}}</td>
<td><div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="40" id="pg1" aria-valuemin="0" aria-valuemax="100"><label id="l1"></label>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" id="pg2" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<label style="font-size :10px"><i class="fa fa-circle" style ="color : #df6d69"></i> Temps Passé : {{tpasse[$index]}}h</label>
&nbsp &nbsp
<label style="font-size :10px"><i class="fa fa-circle" style ="color : green"></i> Temps Prévu : {{tprev[$index]}}h</label>
</td>
</tr>
My function :
$scope.progressBar= function(i){
var tpa;
var p1 = document.getElementById('pg1');
var p2 = document.getElementById('pg2');
var l1 = document.getElementById('l1');
tpa = ($scope.tpasse[i]*100)/$scope.tprev[i];
if(tpa<=100){
p1.style.width = tpa + '%';
p2.style.width = 100-tpa + '%';
l1.innerHTML = " ";
}
else{
p1.style.width = '100' +'%';
l1.innerHTML = "Attention : Temps prévu dépassé !";
}
};
In the result I only get the data of the last line of the table and it appears in the first line:
This result should appear in the second line which is now empty, while the first one should have different result. Any suggestions on how to solve this issue ?
Here is a plunker that illustrates this problem : https://plnkr.co/edit/nGxqMOPejKMINb89Ewwx?p=preview
The main issue with you cod is that you have same id for different elements. And that is not allowed so only your progress bars are not coming properly. Below is the code that solves your problem. But what i would suggest is that there are other issues as well with your code for eg you are using interpolation with ng-init={{}progressBar($index)} but this will throw error as progressBar returns nothing. I think you need to review you code properly.
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function ($scope) {
$scope.tpasse = ['5049','26','100'];
$scope.tprev = ['688','336','400'];
$scope.projetsListe = [
{
"NomProjet" : "Project1",
"ResponsableApitech" : "Jean"
},
{
"NomProjet" : "Project2",
"ResponsableApitech" : "Edward"
},
{
"NomProjet" : "Project2",
"ResponsableApitech" : "Edward"
}
];
console.log($scope.projetsListe);
$scope.progressBar= function(i){
var tpa;
var p1 = document.getElementById('pg'+i);
var p2 = document.getElementById('pgb'+i);
var l1 = document.getElementById('l'+i);
tpa = ($scope.tpasse[i]*100)/$scope.tprev[i];
if(tpa<=100){
p1.style.width = tpa + '%';
p2.style.width = 100-tpa + '%';
l1.innerHTML = " ";
}
else{
p1.style.width = '100' +'%';
l1.innerHTML = "Attention : You have reached the limits!";
}
};
});
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Nom</th>
<th>Responsable</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in projetsListe track by $index">
<td>{{p.NomProjet}}</td>
<td>{{p.ResponsableApitech}}</td>
<td>
<div class="progress" ng-init="{{progressBar($index)}}">
<div class="progress-bar progress-bar-danger " role="progressbar" aria-valuenow="40" id="pg{{$index}}" aria-valuemin="0" aria-valuemax="100">
<label id="l{{$index}}"></label>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped " role="progressbar" aria-valuenow="40" id="pgb{{$index}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<label style="font-size :10px"><i class="fa fa-circle" style="color : #df6d69"></i> Temps Passé : {{tpasse[$index]}}h</label>
<label style="font-size :10px"><i class="fa fa-circle" style="color : green"></i> Temps Prévu : {{tprev[$index]}}h</label>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Updated Plunker
Hope it helps :)
I know, you've already accepted the answer, but I still want to suggest you to use components approach (because you are using angularjs 1.5+) to solve your problem. There a few things in your code that looks not very good: ngInit adds unnecessary amounts of logic into your templates and you can avoid using it because components have a well-defined lifecycle and you can use $onChanges hook to re-draw your progress bar. Also manipulating DOM inside the controller is not an angular-way of working with your views, it is better to use ngStyle directive in your case. Here is a working example:
angular.module('myApp', []).controller('Ctrl', function ($scope) {
$scope.projetsListe = [
{
NomProjet : "Project1",
ResponsableApitech : "Jean",
tpasse: 5049,
tprev: 688
}, {
NomProjet : "Project2",
ResponsableApitech : "Edward",
tpasse: 26,
tprev: 336
}, {
NomProjet : "Project4",
ResponsableApitech : "Edward",
tpasse: 177,
tprev: 336
}
];
})
.component('progressBar', {
templateUrl: "progress-bar.html",
bindings: {
project: '<'
},
controller: 'ProgressBarCtrl'
})
.controller('ProgressBarCtrl', [function ProgressBarCtrl (){
var ctrl = this;
ctrl.$onChanges = onChanges;
ctrl.styles = {};
function onChanges(changesObject){
ctrl.styles = getStyles(ctrl.project);
}
function getStyles(project){
var tpa, styles = {};
tpa = (project.tpasse*100) / project.tprev;
if (tpa <= 100){
styles = {
p1Width: tpa + '%',
p2Width: 100-tpa + '%',
l1innerHTML: " "
};
} else{
styles = {
p1Width: '100%',
l1innerHTML: "Attention : You have reached the limits!"
};
}
return styles;
}
return ctrl;
}]);
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Responsable</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in projetsListe">
<td>{{p.NomProjet}}</td>
<td>{{p.ResponsableApitech}}</td>
<td>
<progress-bar project="p"></progress-bar>
</td>
</tr>
</tbody>
</table>
<script type="text/ng-template" id="progress-bar.html">
<div class="progress">
<div class="progress-bar progress-bar-danger" ng-style="{'width': $ctrl.styles.p1Width}" role="progressbar"
aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100">
<label>{{$ctrl.styles.l1innerHTML}}</label>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped" ng-style="{'width': $ctrl.styles.p2Width}"
role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<label style="font-size :10px"><i class="fa fa-circle" style="color : #df6d69"></i> The actual Time spent :
{{$ctrl.project.tpasse}}h</label>
<label style="font-size :10px"><i class="fa fa-circle" style="color : green"></i> The Initial expected time :
{{$ctrl.project.tprev}}h</label>
</script>
</div>
</body>
</html>

Is it possible to change the image style of a bootstrap progress bar?

I am attempting to change the style of a bootstrap progress bar, and place the current percentage value in it. Clicking the button allows the value (width) to change, but not the background or text value.
Here is the code.
$(function() {
$(document).ready(function() {
$("#progress-bar1").css("width", "50%");
$("#progress-bar1").attr("aria-valuenow", "50%");
});
});
$(document).ready(function() {
$("#btnSubmit").click(function() {
$('#progress-bar1').css("width", "10%");
$("#progress-bar1").attr("progress-bar-danger", "10");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
50%
</div>
</div>
<input id="btnSubmit" type="submit" value="Update" />
You need to add the class progress-bar-danger and update the text to 10%:-
$("#btnSubmit").click(function(){
$('#progress-bar1')
.addClass('progress-bar-danger') // change to red
.css("width", "10%") // change width to 10%
.attr('aria-valuenow', 10) // change value to 10
.text('10%'); // change text to 10%
});
Fiddle
You can create a jQuery plugin to set the progress value.
(function($) {
$.progressArray = ['danger', 'warning', 'info', 'success'];
$.fn.setProgress = function(percentVal) {
percentVal = percentVal === 0 ? 0 : percentVal || parseInt(this.attr('aria-valuenow'), 10) || 0;
percentVal = Math.min(100, Math.max(0, percentVal));
var progressIndex = Math.ceil(percentVal / 25) - 1;
return this.css('width', percentVal + '%')
.attr('aria-valuenow', percentVal)
.text(percentVal + '%')
.removeClass($.progressArray.map(cls => 'progress-bar-' + cls).join(' '))
.addClass('progress-bar-' + $.progressArray[progressIndex]);
};
$.fn.addProgress = function(percentVal) {
return this.setProgress((parseInt(this.attr('aria-valuenow'), 10) || 0) + percentVal);
};
$.fn.setTooltipText = function(text) {
return this.tooltip('hide').attr('data-original-title', text).tooltip('fixTitle');
};
$.fn.replaceTooltipText = function(regex, repl) {
return this.setTooltipText(this.attr('data-original-title').replace(regex, repl));
};
})(jQuery);
$(function() {
$('[data-toggle="tooltip"]').tooltip({ placement : 'bottom' });
var $progressBar = $("#progress-bar-1").setProgress();
$('#btn-decr').on('click', function() {
$progressBar.addProgress(-parseInt($('#progress-step').val(), 10));
});
$('#btn-incr').on('click', function() {
$progressBar.addProgress(parseInt($('#progress-step').val(), 10));
});
$('#progress-step').on('keyup change', function() {
var pattern = /\d+(\.\d+)?/g, replacement = $('#progress-step').val();
$('#btn-decr').replaceTooltipText(pattern, replacement);
$('#btn-incr').replaceTooltipText(pattern, replacement);
});
});
.tooltip-inner {
font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar-1" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-sm-5 col-md-2 text-center">
<button type="button" class="btn btn-primary" id="btn-decr"
data-toggle="tooltip" title="Decrease Progress by 25%">
<i class="fa fa-arrow-down"></i> %
</button>
</div>
<div class="col-sm-2 col-md-2">
<input type="number" class="form-control" id="progress-step"
min="0" max="100" step="10" data-buttons="true" value="25" />
</div>
<div class="col-sm-5 col-md-2 text-center">
<button type="button" class="btn btn-primary" id="btn-incr"
data-toggle="tooltip" title="Increase Progress by 25%">
<i class="fa fa-arrow-up"></i> %
</button>
</div>
</div>
</div>
You would have to modify the "background-image" css property. In your HTML code, try adding the following, as an example:
<style>
#progress-bar1{
background-image: none;
background-color: green;
}
</style>

Use AngularJS $http.get to repeatedly request JSON array on scrolling

Below is a snippet using AngularJS to get the JSON response.
On scrolling to the bottom of the page, I need to request repeatedly till the JSON array list is empty.
<section>
<div style="padding-top:60px" infinite-scroll="myPagingFunction()" infinite-scroll-distance="3" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="news in newsList">
<div class="col-lg-3 col-md-4 col-sm-6" style="">
<div class="thumbnail">
<img src="{{news.coverUrl}}" class="img-responsive" alt="{{news.name}}"/>
<div class="caption">
<h4>{{news.name}}</h4>
</div>
</div>
</div>
<div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div>
<div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div>
<div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/ng-infinite-scroll.min.js"></script>
<script>
var offset = 0
var maxCount = 20
var app = angular.module('myApp', ['infinite-scroll']);
function myPagingFunction(){
app.controller('myCtrl', function($scope, $http) {
$http.get("news.json").then(function(response) {
$scope.newsList = response.data;
});
});
}
myPagingFunction();
</script>
<script src="js/bootstrap.min.js"></script>
Kindly help me in solving this.
Using jQuery + angular is not good
You must use angular way instead, and write some directives or listeners in run phase, but here's a better approach - use `ngInfiniteScroll plugin
You can simply use infinite Scroll services to easily achieve this ,
<ANY infinite-scroll='{expression}'
[infinite-scroll-distance='{number}']
[infinite-scroll-disabled='{boolean}']
[infinite-scroll-immediate-check='{boolean}']
[infinite-scroll-listen-for-event='{string}']>
Add ng-infinite scroll module in your application
for more info refer this [Documentation]:(https://sroze.github.io/ngInfiniteScroll)
You can use this simple directive and enjoy:
app.directive("scroll",['$window', function ($window) {
return function (scope, element, attrs) {
angular.element($window).bind("scroll", function () {
if (document.body.scrollHeight - $window.scrollY < 890) {
scope.$apply(function () {
scope.myPagingFunction();
});
}
});
};
}]);
and you can use this code for your situation
<section>
<div style="padding-top:60px" scroll ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="news in newsList">
<div class="col-lg-3 col-md-4 col-sm-6" style="">
<div class="thumbnail">
<img src="{{news.coverUrl}}" class="img-responsive" alt="{{news.name}}"/>
<div class="caption">
<h4>{{news.name}}</h4>
</div>
</div>
</div>
<div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div>
<div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div>
<div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/ng-infinite-scroll.min.js"></script>
<script>
var offset = 0
var maxCount = 20
var app = angular.module('myApp', ['infinite-scroll']);
app.controller('myCtrl', function ($scope, $http) {
$scope.myPagingFunction= function() {
$http.get("news.json").then(function (response) {
$scope.newsList = response.data;
});
}
});
app.directive("scroll",['$window', function ($window) {
return function (scope, element, attrs) {
angular.element($window).bind("scroll", function () {
if (document.body.scrollHeight - $window.scrollY < 890) {
scope.$apply(function () {
scope.myPagingFunction();
});
}
});
};
}]);
</script>
<script src="js/bootstrap.min.js"></script>

Animate a Bootstrap progressbar from 0 to 100%

I'm using Twitter Bootstrap to build my web page.
I have this HTML code:
<div class="btn-group">
<button type="button" class="btn btn-success">Connect</button>
<button type="button" class="btn btn-success dropdown-data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li> Connect 1</li>
<li role="separator" class="divider"></li>
<li> Connect 2</li>
</ul>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="alert alert-success" role="alert">Well done! You successfully connected. Next</div>
I want to animate the progress bar from 0 to 100% when user push the connect button or push the dropdown button (one of two) and when the progressbar reach 100% the script show the alert previously hidden.
This is all it takes to create an animated progress bar :
var $progressBar = $('.progress-bar').css('width', '80%');
This particular code will animate the progress bar from the current value to a value of 80%.
A demo
var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');
setTimeout(function() {
$progressBar.css('width', '10%');
setTimeout(function() {
$progressBar.css('width', '30%');
setTimeout(function() {
$progressBar.css('width', '100%');
setTimeout(function() {
$progress.css('display', 'none');
$alert.css('display', 'block');
}, 500); // WAIT 5 milliseconds
}, 2000); // WAIT 2 seconds
}, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second
.progress, .alert {
margin: 15px;
}
.alert {
display: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="alert alert-success" role="alert">Well done! You successfully connected. Next</div>
(see also this Fiddle)
In bootstrap v4 the progress bar animation is not by default anymore.
You can add transition-duration to the progress bar element to slow down the transition from 0 to the new width.
<div class="progress-bar progress-bar-animated" role="progressbar" style="transition-duration:300ms;"></div>
Try this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Progress Bar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<h2>Task Progress</h2>
<div class="progress">
<div class="progress-bar" id="bar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<script type="text/javascript">
var i = 0;
var progressBar = $("#bar");
function countNumbers(){
if(i < 100){
i = i + 1;
progressBar.css("width", i + "%");
}
// Wait for sometime before running this script again
setTimeout("countNumbers()", 500);
}
countNumbers();
</script>
</div>
</body>
</html>
Taken this example from:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-progress-bars.php
http://www.tutorialrepublic.com/html-reference/html5-progress-tag.php
The bootstrap progress bar is animated by default. When you set the progress value to a new value it will cause the the bar to animate. You just need to set the value:
var bar = $(".progress-bar");
bar.attr("aria-valuenow", newValue);
bar.css("width", newValue + "%");
I know this was old enough.
But try code below, it should help you to animate more than one progress bar (if you happen to use more than one within a page).
Everytime you add progress bar, simply add another execProg() with desired width and its respective id
//jQuery for progress bar animating START
function execProg(num, id) {
/* num --> percentage of width
* id --> id of progress bar
*/
var progressBar = $(id);
for (var i = 0; i < num; i++) {
progressBar.css("width", i + "%");
}
}
//The first bar set to 65%
execProg(65, "#barOne");
//The second bar set to 100%
execProg(100, "#barTwo");
//jQuery for progress bar animating END
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress" id="setProg">
<div class="progress-bar align-middle" id="barOne">
<p>Some Text Here</p>
</div>
</div>
<div class="m-3"></div>
<div class="progress" id="setProg">
<div class="progress-bar" id="barTwo">
<span class="sr-only">60% Complete</span>
</div>
</div>

Categories