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.
Related
I have a pretty simple custom directive which presents a form to enter a numeric value. This directive is embedded inside a modal dialog box that is triggered when required. While I can pass data into the dialog through the modal, I am having trouble getting data entered in the input element within the directive back out when the user clicks "OK". I imagine it has something to do with the scope of the directive, since I am using isolate scope, but I marked the name with '=' in the scope section, so I'm not sure what is going wrong.
Here is the plunker that demonstates the issue. Plunker example
var app = angular.module('plunker', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $uibModal, $log, $document) {
var self = this;
var $ctrl = self;
$ctrl.modalresult = "no result";
$ctrl.name = 'World';
$ctrl.myvalue = "-99";
$ctrl.openGetConstantDialog = function(varname, parentSelector, size) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector(parentSelector)) : undefined;
$ctrl.modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
template: `<get-numeric-dialog title="Define a New Constant"
prompt="Enter a value for constant"
varname="${varname}" placeholder="Enter a numeric value">
</get-numeric-dialog>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok(myvalue)">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>`,
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: 'sm',
appendTo: parentElem
});
$ctrl.modalInstance.result.then(function(value) {
$ctrl.modalresult = $ctrl.myvalue;
console.log("modal instance returned value: ", $ctrl.myvalue);
},
function() {
$ctrl.modalresult = "no value returned"
}
);
}
});
app.controller('ModalInstanceCtrl', function($uibModalInstance, $scope) {
var $ctrl = this;
$ctrl.value = undefined;
$ctrl.ok = function() {
$uibModalInstance.close($ctrl.newValue);
};
$ctrl.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
app.directive('getNumericDialog', [function() {
return {
templateUrl: 'get_numeric_dialog.html',
restrict: 'E',
scope: {
title: '#',
prompt: '#',
varname: '#',
placeholder: '#',
myvalue: '='
}
};
}]);
Here's the directive template:
<div class="modal-header">
<h5 class="modal-title" id="modal-title">{{title}}</h5>
</div>
<div class="modal-body" id="modal-body">
<p>{{prompt}} '<span class="bold">{{varname}}</span>'</p>
<input type='text' placeholder='{{placeholder}}' ng-model="value"><br>
</div>
I managed to get this working after a couple of days, not quite structured as above, because an embedded directive ultimately wasn't worth the additional complexity, but in case anybody else is having trouble, solution below.
var app = angular.module('plunker', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $uibModal, $log, $document) {
var self = this;
var $ctrl = self;
$scope.modalresult = "no result";
$scope.openModal = function() {
var getConstantTemplate = function(title, prompt, buttonCaption, varName) {
let template = `<div class="modal-header">
<h5 class="modal-title" id="modal-title">${title}</h5>
</div>
<div class="modal-body" id="modal-body">
<p>Value for constant '<span class="bold">${varName}</span>':</p>
<input type='text' varname="weeks" placeholder='Enter a number' ng-model="$ctrl.newValue">
<br>
</div>
<div class = "modal-footer" id="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">${buttonCaption}</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>`
return template;
}
var modalInstance = $uibModal.open({
animation: true,
template: getConstantTemplate("New Constant", "a", "Save", "months"),
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: 'sm'
});
modalInstance.result.then(function(result) {
console.log('modalInstance got result ' + result);
$scope.modalresult = result;
});
};
});
app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance) {
var $ctrl = this;
$ctrl.prompt = "Enter a value for constant ";
$ctrl.varname = "weeks";
$ctrl.placeholder = "Enter a number";
$ctrl.ok = function() {
console.log("OK has been called with newValue " + $ctrl.newValue);
$uibModalInstance.close($ctrl.newValue);
};
$ctrl.cancel = function() {
console.log("Cancel has been called");
$uibModalInstance.close("model closed cancelled");
};
})
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker </title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="app2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="plunker">
<div ng-controller="MainCtrl as ctrl">
<button ng-click="openModal()">Open the modal please</button>
<br>
<br>
<p>modalresult = {{modalresult}} </p>
</div>
</body>
</html>
I have the following in my view:
<label for="txtFrom">Pickup Location</label>
<input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
<label for="txtDestination">Destination</label>
<input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
<input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">
I am using google maps api for places to autocomplete the input boxes, so if a user starts typing "Lo", he will get a list of places that starts with "Lo" and for example he chooses London.
The problem is in my controller I am not getting the whole autocompleted value. I am only getting what the user initially entered, in this case "Lo".
Here is my controller:
app.controller('BookingsCtrl', function($scope, BookingsService) {
$scope.pickup = "";
$scope.destination = "";
$scope.syncNotification = "";
$scope.calcPrice = function() {
console.log($scope.pickup);
BookingsService.save({
pickup: $scope.pickup,
destination: $scope.destination
}, function(response) {
console.log(response.message);
});
};
});
EDIT:
Here is also a snippet of the JS:
var pickup = document.getElementById('pickup');
var options = {
componentRestrictions: {
country: 'ee'
}
};
var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
pickup.innerHtml = place.formatted_address;
var lat = place.geometry.location.lat();
var long = place.geometry.location.lng();
});
EDIT 2 : Added service
app.service('BookingsService', function ($resource) {
return $resource('http://localhost:3000/', {});
});
EDIT 3 : Template
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt1Y30OssBToIzSCOr3g5IkN3c0D75XVE&libraries=places"
></script>
</head>
<body ng-app='strelsau_client'>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<img class="masthead-brand" src="../assets/img/logo.png">
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div ng-view>
</div>
</div>
</div>
</div>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers/bookings_controllers.js"></script>
<script src="js/services/bookings_service.js"></script>
</body>
</html>
In fact pickup input element is not getting updated once the place is resolved.
The problem with this function:
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
pickup.innerHtml = place.formatted_address; //invalid
//...
});
For setting input field value should be used value property.
Anyway, given the example, try to replace it with:
(function (scope) {
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
scope.pickup = place.formatted_address;
});
})($scope);
Example
angular.module('myApp', [])
.controller('BookingsCtrl', function ($scope) {
$scope.pickup = "";
$scope.destination = "";
$scope.syncNotification = "";
var pickup = document.getElementById('pickup');
var options = {
componentRestrictions: {
country: 'ee'
}
};
var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);
(function (scope) {
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
scope.pickup = place.formatted_address;
});
})($scope);
$scope.calcPrice = function () {
console.log($scope.pickup);
alert($scope.pickup);
/*BookingsService.save({
pickup: $scope.pickup,
destination: $scope.destination
}, function (response) {
console.log(response.message);
});*/
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div ng-app="myApp" ng-controller="BookingsCtrl" ng-cloak>
<label for="txtFrom">Pickup Location</label>
<input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
<label for="txtDestination">Destination</label>
<input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
<input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">
</div>
****Htmlcode**
<div ng-controller="ngAutoCompleteController">
<div angucomplete-alt id="txtAutocomplete" placeholder="Type country name" pause="100"selected-object="afterSelectedCountry" local-data="Countries" search-fields="CountryName" title-field="CountryName" minlength="1" input-class="form-control" match-class="highlight">
</div>
<div ng-show="SelectedCountry">
Selected Country : {{SelectedCountry.CountryName}}
</div>
</div>
#section scripts{
<script src="~/Scripts/Angularcntrl/Cntrls.js"></script>
<script src="~/Scripts/Angularcntrl/Services.js"></script>
<link href="~/Content/angucomplete-alt.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
}
<style type="text/css">
.angucomplete-dropdown {
overflow-y: auto;
max-height: 200px;
}
</style>
Myapp.Js
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
app.controller('MyHomeCntrl', function ($scope) {
$scope.msg = "Hello Angular...";
})
Controller.Js
app.controller('ngAutoCompleteController', ['$scope', '$http', function ($scope, $http, Myservices) {
$scope.Countries = [];
$scope.SelectedCountry = null;
$scope.afterSelectedCountry = function (selected) {
alert('Enter in Control autocom')
var dbjkb = Myservices.Autocomservice()
if (selected) {
$scope.SelectedCountry = selected.originalObject;
}
}
}]);
Service.Js
app.service('Myservices', function ($scope,$http) {
this.Autocomservice = function () {
var Sert = $http({method: 'GET',url: '/Home/GetCountries',}).then(function (data) {$scope.Countries = data.data; }})return Sert;}})
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>
When I press my button check in bootstrap modal, I want to print the value of my textbox in my console. But my textbox returns a undefined. It seems that all of the code are working perfect.
<!doctype html>
<html ng-app="app" ng-controller="ModalDemoCtrl">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example1.js"></script>
</head>
<body>
<div ><button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
<script type="text/ng-template" id="myModalContent">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<input type="text" ng-model="new1" /><button ng-click="check()" >check</button>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
This is my javascript
var app = angular.module('app', ['ui.bootstrap']);
//var ModalDemoCtrl = function ($scope, $modal, $log) {
app.controller('ModalDemoCtrl',['$scope', '$modal','$log','$rootScope',
function controller($scope, $modal, $log, $rootScope)
{
$scope.open = function (size) {
$scope.val = "";
var modalInstance = $modal.open({
templateUrl: 'myModalContent',
controller: ModalInstanceCtrl,
size: size,
backdrop: 'static',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) {
$scope.check = function()
{
console.log($scope.new1);
};
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
In order to access the $scope variable you need to use $parent as it is creating a child scope in the modal
HTML Code (This is changed):
<input type="text" ng-model="$parent.new" /><button ng-click="check()" >check</button>
Working Fiddle
declare new property on object initialize instead of scope:
var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) {
$scope.model= {};
$scope.check = function()
{
alert($scope.model.new);
};
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
http://plnkr.co/edit/A6I158T9I5kGyChgIDK2?p=preview
You can pass the ng-model as parameter in "Check" function
<input type="text" ng-model="new1" /><button ng-click="check(new1)" >check</button>
$scope.check = function(new1)
{
console.log("value..."+new1);
};