I am taking date and time from the user input and
<input type="datetime-local" ng-model= "datetime" name="datetime" min="2016-01-01T00:00:00" max="2116-12-31T00:00:00" class="b" required/>
want to appear it in this div <div ng-bind="x.todoTime| date : 'medium'" class="bb"></div> but with the interval of 1000.How should I do it?
Js code:-
var app =angular.module('toDolist', []);
app.controller("toDoCtrl",function($scope, $interval) {
$scope.todoWork = [];
$scope.todoAdd = function() {
$scope.todoWork.push({todoText:$scope.task,todoDesc:$scope.description,todoTime:$scope.datetime,todoPriority:$scope.priority,done:false});
$scope.task ='';
$scope.description ='';
$scope.datetime ='';
$scope.priority ='';
};
$interval(function(){
$scope.datetime;;
},1000);
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Date: <input type="datetime-local" ng-model="datetime" min="2016-01-01T00:00:00" max="2116-12-31T00:00:00" id="myLocalDate" value="2014-11-16T15:00:33" ng-change="changeTimer()">
<h1 ng-bind="timerModel"></h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
var tt;
$scope.datetime= "";
$scope.changeTimer = function(){
$interval.cancel(tt);
var t= angular.copy($scope.datetime);
tt= $interval(function(){
t.setSeconds((new Date(t)).getSeconds()+1);
$scope.timerModel=angular.copy(t);
}, 1000);
}
});
</script>
</body>
</html>
Related
My HTML & JS is below.
Can we insert a run / config after a delay in angularJs?
var app = angular.module('demo', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
setTimeout(function(){
angular.module('plunker').run(function($rootScope){
$rootScope.$apply(function (){
$rootScope.hello = "works";
});
});
},1000);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="demo">
<div ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{$root.hello}}
</div>
</section>
I would appreciate if anyone can help with this. Thank you :)
You can make use of $timeout to run a delay.
No need to initialize a new module for this.
var app = angular.module('demo', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.hello = "works";
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="demo">
<div ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{hello}}
</div>
</section>
Following is my angular script :
angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection'])
.controller('MainCtrl', ['$scope', function ($scope) {
var vm = this;
vm.gridOptions = { multiSelect:false};
vm.reset = reset;
function reset() {
vm.gridOptions.mydata = [];
vm.gridOptions.columnDefs = [];
}
}])
.directive("fileread", [function () {
return {
scope: {
opts: '='
},
link: function ($scope, $elm, $attrs) {
$elm.on('change', function (changeEvent) {
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function () {
var mydata = evt.target.result;
var workbook = XLSX.read(mydata, {type: 'binary'});
var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
var mydata = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);
$scope.opts.columnDefs = [];
headerNames.forEach(function (h) {
$scope.opts.columnDefs.push({ field: h });
});
$scope.opts.data = mydata;
$elm.val(null);
});
}
reader.readAsBinaryString(changeEvent.target.files[0]);
});
}
}
}]);
app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
$scope.mySelections = [];
$scope.gridOptions.multiSelect = false;
$scope.gridOptions.modifierKeysToMultiSelect = false;
$scope.gridOptions.noUnselect = true;
$scope.gridOptions.onRegisterApi = function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
$scope.mySelections = $scope.gridOptions.data[0];
var v = {mySelections};
var z = document.getElementById("t");
z.innerHTML.append = v;
});
}
$scope.toggleRowSelection = function() {
$scope.gridApi.selection.clearSelectedRows();
$scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
};
$http.get('/mydata/500_complex.json')
.success(function(mydata) {
$scope.gridOptions.data = mydata;
$scope.gridOptions.multiSelect.data = false;
// $interval whilst we wait for the grid to digest the data we just gave it
$interval( function() {
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);}, 0, 1);
$scope.mySelections = $scope.gridOptions.data[0];
var v = {mySelections};
var z = document.getElementById("t");
z.innerHTML.append = v;
});
}]);
Following is my HTML code :
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl as vm">
<button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button>
<br />
<br />
<div id="grid1" ui-grid="vm.gridOptions" ui-grid-selection class="grid">
<div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
<div class="msg">
<div class="center">
<span class="muted">Select Spreadsheet File</span>
<br />
<input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="vm.gridOptions" multiple="false" />
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
<br />
**<textarea id = "t" style="width:100%"></textarea>**
<br/>
<button id="copy" name="copy" type="button" class="btn btn-success" ng-click="vm.copy()">Copy</button>
</body>
</html>
I want to show selected row in textarea.
Done selecting row at a time,but not able to show data in textarea?
Any suggestion appreciated as I am beginner.
I have two controllers in a template. I am passing data between them using a service. However when the model value is updated using a textbox, the text is refreshed (two-way) only on the first div that uses first controller.
How to get the second div data refreshed
Without using watch or ng-change
With using watch
Reference:
Using ng-change instead of $watch in Angular
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div class="container" style="padding-top: 20px;">
<div ng-controller="myController">
<input type="text" ng-model="valueA">
<p>From First: {{valueA}}</p>
</div>
</div>
<div class="container" style="padding-top: 20px;">
<div ng-controller="mySECONDController">
<p>From Second: {{valueB}}</p>
</div>
</div>
<script>
//defining module
var app = angular.module('myApp', []);
//defining service
app.service('myService', function () {
this.name = '';
this.setName = function (newName)
{
this.name = newName;
};
this.getName = function ()
{
return this.name;
};
}
);
//defining controller
app.controller('myController', function ($scope, myService) {
myService.setName("Lijo");
$scope.valueA = myService.getName();
});
//defining controller
app.controller('mySECONDController', function ($scope, myService) {
$scope.valueB = myService.getName();
});
</script>
</body>
</html>
What you can do is set the value to the service in the first controller and get it using the service in the second one. So it will be always reffering to the value that is stored in the Service.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div class="container" style="padding-top: 20px;">
<div ng-controller="myController">
<input type="text" ng-model="valueA" ng-change="myService.setName(valueA)">
<p>From First: {{myService.getName()}}</p>
</div>
</div>
<div class="container" style="padding-top: 20px;">
<div ng-controller="mySECONDController">
<p>From Second: {{myService.getName()}}</p>
</div>
</div>
<script>
//defining module
var app = angular.module('myApp', []);
//defining service
app.service('myService', function () {
this.name = '';
this.setName = function (newName)
{
this.name = newName;
};
this.getName = function ()
{
return this.name;
};
}
);
//defining controller
app.controller('myController', function ($scope, myService) {
myService.setName("Lijo");
$scope.myService= myService;
$scope.valueA = myService.getName();
});
//defining controller
app.controller('mySECONDController', function ($scope, myService) {
$scope.myService= myService;
});
</script>
</body>
</html>
I am using factory method in AngularJS to show the combination of First Name and Last Name (first two controllers) as Full Name(in third Controller), but i am not getting the desired output. here is my code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Data.FirstName">
<br>FirstName is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="Data.LastName">
<br>LastName is : <strong>{{Data.LastName}}</strong>
</div>
<div ng-controller="ThirdCtrl">
FullName is : {{Data.FirstName + " " + Data.LastName}}
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return { FirstName: '',LastName:'' };
});
myApp.controller('FirstCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('ThirdCrl', function ($scope, Data) {
$scope.Data = Data;
});
</script>
</body>
</html>
Can you please Help?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Data.FirstName">
<br>FirstName is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="Data.LastName">
<br>LastName is : <strong>{{Data.LastName}}</strong>
</div>
<div ng-controller="ThirdCtrl">
FullName is : {{Data.FirstName + " " + Data.LastName}}
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return { FirstName: '',LastName:'' };
});
myApp.controller('FirstCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('ThirdCtrl', function ($scope, Data) {
$scope.Data = Data;
});
</script>
</body>
</html>
It seems you have spelled wrongly the third controller name.
I am using Angular.
In my controller I have:
mainApp.controller('loginBoxController', ['$scope', '$state', 'mainWebService', function($scope, $state, mainWebService) {
$scope.usernameText = "";
$scope.clear_fields = function() {
$scope.usernameText = "";
},
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
}
};
}]);
And in my HTML, I have
<div >
<input ng-jqxinput="txtusername" ng-model="usernameText" type="text" id="txtusernameID"/>
</div>
So, where have I gone wrong. Please help me.
Please try this, create new single page app and run it. It will solve your problem.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.18/angular.js"></script>
<script>
var mainApp = angular.module('MyApp', []);
mainApp.controller('loginBoxController', ['$scope', function($scope) {
$scope.usernameText = "";
$scope.clear_fields = function() {
$scope.usernameText = "";
},
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
}
};
}]);
</script>
</head>
<body ng-app="MyApp" ng-controller="loginBoxController">
<div >
<input ng-jqxinput="txtusername" ng-model="usernameText" type="text" id="txtusernameID"/>
<input type ="button" value="submit" ng-click="clear_fields()"/>
</div>
</body>
</html>
$scope.$apply() after the $scope.clear_fields();
solved my issue.
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
$scope.$apply();
}
};