I want to convert the seconds to minutes and seconds using angular js filters can any body help me .
demo
app.filter('toMinSec', function(){
return function(input){
var minutes = parseInt(input/60, 10);
var seconds = input%60;
return minutes+' minutes'+(seconds ? ' and '+seconds+' seconds' : '');
}
})
A simple filter for your requirement is as shown below.. you just need to fetch minutes with /60 and seconds using %60. Providing an extra check for bad inputs.
var app = angular.module('app', []);
app.filter('secondsToMinute', function(){
return function(timeInSeconds){
if(isNaN(timeInSeconds)){
return 'bad time. Enter time in seconds';
}else{
var minuteValue = parseInt(timeInSeconds/60);
var secondsValue = timeInSeconds%60;
}
return minuteValue + 'min, ' + secondsValue + 'sec';
}
});
app.controller('timeController', function($scope){
$scope.goodTime = 1254;
$scope.badTime = "some time";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="app" ng-controller="timeController">
<div> Good Time is --> {{goodTime | secondsToMinute}}</div>
<div> Bad Time is --> {{badTime | secondsToMinute}}</div>
</div>
Related
In the following script, I am able to get the first letter of string using anularJS.
var app = angular.module('myapp',[]);
app.controller('myCtrl',function($scope) {
$scope.myString = "kashif Riaz";
$scope.slicedString = $scope.myString.slice(0,1);
});
<div ng-app="myapp" ng-controller="myCtrl">
{{slicedString}}
</div>
But Actually my data is coming from database , and here i am unable to get the first letter of string ( which are contact Names).
here is an example of my approach.
app.controller("myCtrl",function($scope,$http) {
$http.post(
"names.php",
{'id':$scope.id}
).then(function(response) {
$scope.names = response.data;
$scope.fLetter = $scope.names.list.slice(0,1);
})
});
In the Last line of above code , ($scope.names.list.slice(0,1) , the list is a name of column in mysql table.
I have got a solution of my own question. that how to get first letter of a string by using a custom filter
var app = angular.module("myapp",[]);
app.filter('myFormat', function() {
return function(x) {
return x.slice(0,1);
};
});
app.controller("ctrl",function($scope,$http) {
$http.post(
"practicephp.php",
{'email':'kashfi#gmail.com','category':'mobileNumbers'}
).then(function(response) {
$scope.lists = response.data;
});
});
<ul ng-repeat= "x in lists">
<li>{{x.list_name | myFormat}}</li>
</ul>
Thank you for people who participate in my question to help me
I'm integrating a simple utility function into an angular app. How do I get the variable utc to show up on the page in my angular app? It's not showing up yet :( Here's the steps I took. Basically I guess I needed to refactor the following snippet into a service.
var offset = - new Date().getTimezoneOffset();
var utc = ((offset > 0 ? '+' : '') + offset / 60);
document.write(utc);
Here's my service... not sure if this is correct as it's not working yet.
(function () {
'use strict';
angular.module('weatherapp.weatherlist')
.factory('utcFactory', function utcFactory() {
return {
myUTC: function() {
var offset = - new Date().getTimezoneOffset();
var utc = ((offset > 0 ? '+' : '') + offset / 60);
return utc;
}
};
}
})();
Here's the controller:
(function () {
'use strict';
angular.module('weatherapp.weatherlist', ['weatherapp.locations'])
.controller('WeatherlistController', ['$scope', 'LocationService', 'WEATHER_API_URL', 'WEATHER_API_IMAGE_URL', 'WEATHER_API_ID', 'WeatherListFactory', 'utcFactory',WeatherListCtrl]);
function WeatherListCtrl($scope, LocationService, WEATHER_API_URL, WEATHER_API_ID, WEATHER_API_IMAGE_URL, WeatherListFactory, utcFactory) {
$scope.$on('$ionicView.enter', function(){
$scope.locationData= [];
//TODO Show empty String when no locations are set.
var locations = LocationService.getLocations();
$scope.noLocation=locations.length<1;
if (!$scope.noLocation){
locations.forEach(function (location) {
WeatherListFactory.getWeatherData(WEATHER_API_URL + 'q=' + location + '&appid=' + WEATHER_API_ID).then(function (response) {
response.data.weather[0].icon=WEATHER_API_IMAGE_URL+response.data.weather[0].icon+'.png';
$scope.locationData.push(response.data);
});
});
}
});
}
})();
Here's how I'm trying to bind it in the view, do I need anything else than this? <span class="tiny">{{utc}}</span>
What am I doing wrong? Is there a better way to approach this? Seems overkill for such a simple thing.
The factory does not have its own scope. As you have already injected the utcFactory in the controller. Bind the return of service to $scope.utc as:
utcFactory.myUTC().then(function(results) {
$scope.utc = results.data;
});
I'm developing application with Angular material.
Same code work with angular application but does not work with angular material.
Here is my controller code
$scope.casesData = [];
var casesData = {};
$scope.first = 0;
$scope.last = 20;
var onResponse = function(response){
casesData = response;
$scope.loadMore();
};
$scope.loadMore = function () {
for ($scope.first; $scope.first < $scope.last; $scope.first++) {
if(casesData[$scope.first] !== undefined)
$scope.casesData.push(casesData[$scope.first]);
}
$scope.last = $scope.last + 20;
};
Here is my view code
<div infinite-scroll="loadMore()" infinite-scroll-distance="3" infinite-scroll-immediate-check="false">
<div ng-repeat="(key,value) in casesData">
<div>
//Do some stuff
</div>
<!-- Recent records listing -->
<md-item class="item" ng-repeat="case in value track by case.index_no" ng-class="">
//Do some stuff
</md-item>
</div>
</div>
After successful request I'm sending response to the onResponse() function. First time it's giving me 20 records but when I scroll down the page it's not calling the loadMore() function from view
Same type of example I implemented in angular js only it's working but don't know Why this is not working with angular material.
Please help me out from this stuff.
I made a web page for by AngularJS.
I want my web page to take action within a specific time.
for example,
If the 2016-01-07 11:00:00,
ng-show wants to take action.
Timer is using Angular-timer.
http://siddii.github.io/angular-timer/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation
However, I don't know how can I hold a event when the time changes to 0
You can just make a real-time timer with plain Java and check with an if statement if it's the time you want. Like this:
var app = angular.module('App', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.clock = "loading clock..."; // initialise the time variable
$scope.tickInterval = 1000 //ms
var tick = function() {
$scope.clock = Date.now() // get the current time
$timeout(tick, $scope.tickInterval); // reset the timer
var d = new Date();
if (d.getMonth() + 1 == 1 && d.getDate == 7 && d.getHours == 11) { //January is 0, February is 1, and so on
//Your code goes here...
}
}
// Start the timer
$timeout(tick, $scope.tickInterval);
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<p>{{ clock | date:'medium'}}</p>
</div>
</body>
</html>
In this demo I used .getSeconds, but you can also do month, day, hours, minutes to get an alert on the date you wanted.
I hope this helped you enough :)
If you need to execute some code when the timer reaches 0, then just use the 'timer-stopped' event. Found here
Just a tip: You can construct a valid date object by using a recognised format in the constructor or by using Date.parse
This way you can check if your date/time target has occurred (or passed) by using:
var targetDate = new Date('2016-01-07 11:00:00');
function targetDateHasPassed() {
return new Date() >= targetDate;
}
if(targetDateHasPassed()) {
//...do stuff
}
I have a time component that gets the data in seconds, but I would like to convert to minutes and round before displaying. I wrote the following code:
var Time = React.createClass({
minutes: function() {
var mins = Math.round(this.props.data/60);
return mins;
},
render: function(){
return (
<div className="">
{this.minutes}
</div>
);
}
});
This didn't work (shows nothing, no error), I also tried the following:
var Time = React.createClass({
render: function(){
var minutes = function() {
var mins = Math.round(this.props.data/60);
return mins;
};
return (
<div className="">
{minutes}
</div>
);
}
});
which also doesn't work (shows nothing, no error).
There seems to something key that I'm not understanding, but not sure what it is. Any help would be appreciated.
Thanks
minutes should be called (it's a function) so use {this.minutes()} in the first example or {minutes()} in the second.