Hi I tried to make a simple jsxgraph plot where I can switch some properties of the board with buttons.
I am using angular but I can't see why it does not work.
Here is the fiddle
I am happy about any kind of help
<div class="col-md-10">
<div ng-controller="MyCtrl">
<div id="jsxgbox" class="jxgbox " style="width:250px; height:250px;"></div>
<button type="button" class="btn btn-primary" ng-model="showAxis" ng-click="showAxis = !showAxis">
<span ng-show="showAxis">axis On</span>
<span ng-show="!showAxis">axis Off</span></button>
<button type="button" class="btn btn-primary" ng-model="showNav" ng-click="showNav = !showNav"> <span ng-show="showNav">Navigation On</span>
<span ng-show="!showNav">Navigation Off</span></button>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.showAxis = true;
$scope.showNav = false;
$scope.axisOn = true
$scope.board = JXG.JSXGraph.initBoard('jsxgbox', {
unitX: 10, // this are the lighter gray lines parallel ro the y axis
unitY: 10,
axis: $scope.showAxis,
showNavigation: $scope.showNav,
showCopyright: false,
grid: true,
wheel: true,
keepaspectratio: true,
needshift: false,
boundingbox: [-5, 5, 5, -5] // upperleft corner ( x1,y1) bottom right corner (x2,y2)
});
}
In JSXGraph, the default axes and the navigation bar behave a little bit different from other elements. The navigation bar can only be switched off by setting directly the CSS attribute to the HTML div.
Here is a working version of your example. I'm sorry if the code is not polished. This is my first angual.js application. But it is nice to see how JSXGraph and angualrs.jus work together.
<!doctype html>
<html ng-app="JSXGraphApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css"/>
</head>
<body>
<div class="col-md-10">
<div ng-controller="JSXGraphController">
<div id="jsxgbox" class="jxgbox " style="width:250px; height:250px;"></div>
<button type="button" class="btn btn-primary" ng-model="showAxis" ng-click="toggleAxis()">
<span ng-show="showAxis">axis On</span>
<span ng-show="!showAxis">axis Off</span>
</button>
<button type="button" class="btn btn-primary" ng-model="showNav" ng-click="toggleNav()">
<span ng-show="showNav">Navigation On</span>
<span ng-show="!showNav">Navigation Off</span>
</button>
<button type="button" class="btn btn-primary" ng-model="showPoint" ng-click="togglePoint()">
<span ng-show="showPoint">Show point</span>
<span ng-show="!showPoint">Hide point</span>
</button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var JSXGraphApp = angular.module('JSXGraphApp', [])
.controller('JSXGraphController', function($scope) {
$scope.showAxis = true;
$scope.showNav = false;
$scope.showPoint = true;
$scope.axisOn = true;
$scope.board = JXG.JSXGraph.initBoard('jsxgbox', {
unitX: 10, // this are the lighter gray lines parallel ro the y axis
unitY: 10,
axis: $scope.showAxis,
showNavigation: $scope.showNav,
showCopyright: false,
grid: true,
wheel: true,
keepaspectratio: true,
needshift: false,
boundingbox: [-5, 5, 5, -5] // upperleft corner ( x1,y1) bottom right corner (x2,y2)
});
$scope.toggleNav = function() {
var navbar = document.getElementById($scope.board.containerObj.id + '_navigationbar');
$scope.showNav = !$scope.showNav;
if ($scope.showNav) {
navbar.style.display = "block";
} else {
navbar.style.display = "none";
}
};
$scope.toggleAxis = function() {
$scope.showAxis = !$scope.showAxis;
$scope.board.defaultAxes.x.setAttribute({visible: $scope.showAxis});
$scope.board.defaultAxes.y.setAttribute({visible: $scope.showAxis});
};
$scope.p = $scope.board.create('point', [1, 2]);
$scope.togglePoint = function() {
$scope.showPoint = !$scope.showPoint;
$scope.p.setAttribute({visible: $scope.showPoint});
};
});
</script>
Related
As you can see in that snippet, I've set the attributes show-meridian and show-spinners to match to the variable $scope.myBool.
I've added as well a green button that says change! and toggles $scope.myBool.
While show-meridian is perfectly reacting to any change in $scope.myBool, show-meridian is not being updated.
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.9/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.0/ui-bootstrap-tpls.min.js"></script>
<script>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function($scope, $log) {
$scope.mytime = new Date();
$scope.hstep = 1;
$scope.mstep = 15;
$scope.options = {
hstep: [1, 2, 3],
mstep: [1, 5, 10, 15, 25, 30]
};
$scope.ismeridian = true;
$scope.toggleMode = function() {
$scope.ismeridian = !$scope.ismeridian;
};
$scope.update = function() {
var d = new Date();
d.setHours(14);
d.setMinutes(0);
$scope.mytime = d;
};
$scope.changed = function() {
$log.log('Time changed to: ' + $scope.mytime);
};
$scope.clear = function() {
$scope.mytime = null;
};
$scope.myBool = false;
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.timepickercontainer .uib-timepicker .btn-link {
display: none;
}
</style>
</head>
<body>
<div ng-controller="TimepickerDemoCtrl">
<div class="timepickercontainer">
<div uib-timepicker ng-model="mytime" ng-change="changed()" arrowkeys="false" hour-step="hstep" minute-step="mstep" show-meridian="myBool"
show-spinners="!myBool" ></div>
</div>
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
<div class="row">
<div class="col-xs-6">
Hours step is:
<select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
</div>
<div class="col-xs-6">
Minutes step is:
<select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
</div>
</div>
<hr>
<button type="button" class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
<button type="button" class="btn btn-default" ng-click="update()">Set to 14:00</button>
<button type="button" class="btn btn-danger" ng-click="clear()">Clear</button>
<button class='btn btn-success' ng-click='myBool = !myBool'>change!</button>
</div>
</body>
</html>
This is a hacky soluction. how i say in the comment is better to maka a issue in the repo of the directive.
for make spinner hide and show you must enter in the ui-bootstrap-tpls.js file and find this line
$scope.showSpinners = angular.isDefined($attrs.showSpinners) ?
$scope.$parent.$eval($attrs.showSpinners) : timepickerConfig.showSpinners;
and substitute with this
$scope.showSpinners = timepickerConfig.showSpinners;
if ($attrs.showSpinners) {
watchers.push($scope.$parent.$watch($parse($attrs.showSpinners),
function(value) {
$scope.showSpinners = !!value;
updateTemplate();
}));
}
heres is my plnkr
example
I'm trying to make a page print with Angular, using ng-if.
$scope.onBtnPrintClicked = function(journal, date) {
$scope.printTransaction = false;
$scope.current = new Date();
window.print()
};
$scope.onBtnPrintTransactionClicked = function(journal, date) {
$scope.printTransaction = true;
$scope.current = new Date();
window.print()
};
<button ng-click="onBtnPrintTransactionClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i> Print</button>
<button ng-click="onBtnPrintClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>Print 2</button>
<section ng-if="printTransaction" class="printable journal-container">
<h1>PRINT</h1>
</section>
<section ng-if="!printTransaction" class="printable journal-container">
<div class="row">
<div class="col-sm-12">PRINT2</div>
</div>
</section>
But when I try to click print/print 2 it's showing different page/content.
What could be the problem?
From what I could understand from your question is that you're trying to print the current page, however the changes performed by your functions aren't completely load yet, so you could use setTimeout to make a little delay, as below:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.printTransaction = true;
$scope.onBtnPrintClicked = function(journal, date) {
$scope.printTransaction = false;
$scope.current = new Date();
setTimeout(function() {
window.print();
}, 500);
};
$scope.onBtnPrintTransactionClicked = function(journal, date) {
$scope.printTransaction = true;
$scope.current = new Date();
setTimeout(function() {
window.print();
}, 500);
};
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body ng-controller="MainCtrl">
<button ng-click="onBtnPrintTransactionClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i> Print</button>
<button ng-click="onBtnPrintClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i> Print 2</button>
<section ng-if="printTransaction" class="printable journal-container">
<h1>PRINT</h1>
</section>
<section ng-if="!printTransaction" class="printable journal-container">
<div class="row">
<div class="col-sm-12">PRINT2</div>
</div>
</section>
</body>
</html>
Note: I don't know if these are your real functions, but you could simplify it and do it all in a single function.
I'm trying to get multiple Angular Material checkboxes with the same ng-model. I have two problems: how to get default checked checkboxes, and how to make at least one of these checkboxes to be required. I tried with ng-checked, but then I can't POST the values through the form.
HTML
<label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
<div class="col-sm-10" >
<span class="col-sm-2" ng-repeat="period in periods">
<md-checkbox ng-model="form.periods[period]" ng-click="toggle(period, selected)">
{{ period }}. sat
</md-checkbox>
</span>{{selected | json}}
</div>
App.js
$scope.periods = [1,2,3,4,5,6,7,8,9,0]; /*broj sati*/
$scope.selected = [2];
$scope.toggle = function (period, list) {
var idx = list.indexOf(period);
if (idx > -1) {
list.splice(idx, 1);
}
else {
list.push(period);
}
};
$scope.exists = function (period, list) {
return list.indexOf(period) > -1;
};
Please, help.
Actually your ngModel is an object, so to get selected value rendered on load, you should do the following:
$scope.model = {};
$scope.model.periods = {"2": true};
And to get all selected checkboxes you should iterate over the keys, as below:
$scope.save = function() {
// Get all checked boxes
var checked = Object.keys($scope.model.periods).filter(function(key) {
return $scope.model.periods[key];
});
console.log(checked);
}
See it working:
(function() {
angular
.module('app', ['ngMaterial'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.model = {};
$scope.model.periods = {"2": true};
$scope.periods = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; /*broj sati*/
$scope.save = function() {
// Get all checked boxes
var checked = Object.keys($scope.model.periods).filter(function(key) {
return $scope.model.periods[key];
});
console.log(checked);
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form">
<div class="col-md-12">
<label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
<div class="col-sm-10">
<span class="col-sm-2" ng-repeat="period in periods">
<md-checkbox ng-model="model.periods[period]">
{{ period }}. sat
</md-checkbox>
</span>
</div>
<span ng-bind="model.periods | json"></span>
<hr>
<button type="button" class="btn btn-success" ng-click="save()">Save data</button>
</div>
</form>
</body>
</html>
I hope it helps.
I am a beginner in angularjs, i want to know what code should be used if i want to pop up a drop down depending upon the button being clicked.
If i click on India, the drop down corresponding to India should appear and if I click on Pakistan, the drop down corresponding to Pakistan should appear.
This is what I've tried so far :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
button
{ background-color: #4CAF50;
color: white;
display: inline-block;
text-align: center;
font-size: 16px ;
}
</style>
<body>
<div>
<br/>
<button type = "India" ng-click= "India_dropDown">India </button> <br/> <br/>
<button type = "Pakistan" ng-click= "Pakistan_dropDown">Pakistan </button>
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model= "India_dropDown" ng-options= " x for x in names1">
</select>
<select ng-model= "Pakistan_dropDown" ng-options= " y for y in names2">
</select>
</div>
<script>
var app = angular.module('myApp' , [] );
app.controller('myCtrl' , function($scope) {
$scope.names1 = ['Sachin' ,'Dhoni','Virat','Dravid'] ;
$scope.names2 = ['Shoaib' ,'Malik','Irfan','Sarfraz'] ;
});
</script>
</body>
</html>
I have created a fiddler here to demo the solution. Basically I am triggering the mouse down event on the required select box which will pop the box.
Controller
$scope.indiaDropDown = function() {
var dropdown = document.getElementById('indiaselect');
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
}
$scope.pakDropDown = function() {
var dropdown = document.getElementById('pakselect');
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
}
HTML
<select ng-model="India_dropDown" id="indiaselect" ng-options=" x for x in names1">
</select>
<select ng-model="Pakistan_dropDown" id="pakselect" ng-options=" y for y in names2"></select>
<br/>
<button type="India" ng-click="indiaDropDown()">India </button>
<br/>
<button type="Pakistan" ng-click="pakDropDown()">Pakistan </button>
I am not sure if you pop open the dropdowns or just show/hide it. Incase you want to just show/hide the select boxes consider using ng-show/ng-hide. My solution will pop open the dropdown.
Programmatically show or hide each select box using ng-show.
<div ng-show="country === 'Packistan'">
<!-- pakistan select -->
</div>
<div ng-show="country === 'India'">
<!-- India select -->
</div>
Toggle country by what was clicked.
<button id="India" ng-click="toggleCountry($event)">India</button>
<button id="Pakistan" ng-click="toggleCountry($event)">Pakistan</button>
In your controller...
$scope.country = "";
$scope.toggleCountry = function(e) {
$scope.country = e.target.id;
}
Or just set it directly in the ng-click action.
<button id="India" ng-click="country = 'India';">India</button>
<button id="Pakistan" ng-click="country = 'Pakistan';">Pakistan</button>
Maybe like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-require="angular.js#1.4.x"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<button type="button" ng-click="setCountry(india)">India</button>
<button type="button" ng-click="setCountry(pakistan)">Pakistan </button>
</div>
<select ng-model="country_select" ng-options="x for x in country"></select>
</div>
<script>
var app = angular.module('myApp' , [] );
app.controller('myCtrl' , ['$scope', function($scope) {
$scope.country = [];
$scope.india = ['Sachin' ,'Dhoni','Virat','Dravid'];
$scope.pakistan = ['Shoaib' ,'Malik','Irfan','Sarfraz'];
$scope.setCountry = function(name){
$scope.country = name;
};
}]);
</script>
</body>
</html>
I've a table with a popover for every cell as in the follow example:
the call to popover:
<td ng-repeat="i in c.installments" ng-class="{ 'first' : i.first, 'last' : i.last, 'advance' : i.advance.value > 0, 'edited' : i.edited, 'final-installment' : i.last }" popover-trigger="{{ popoverFilter(i) }}" popover-placement="top" popover-title="{{i.id == 0 ? 'Advance' : 'Installment ' + i.id}}" popover-append-to-body="true" popover-template="popoverTemplate(i)" ng-init="payment= i; newpayment= i.amount.rounded_value" >
The popover template:
<script type="text/ng-template" id="editPopoverTemplate.html">
<form name="editPayment">
<h2>{{payment.amount.value|currency:undefined:cents}}</h2>
<div class="form-group" ng-class="{ 'has-error' : editPayment.newpayment.$invalid }">
<label>New value:</label>
<input type="number" name="newpayment" ng-model="newpayment" class="form-control no-spinner" step="1" min="10" required>
<span ng-messages="editPayment.newpayment.$error" class="help-block" role="alert">
<span ng-message="required">The value is mandatory</span>
<span ng-message="min">The value is too low</span>
<span ng-message="max">The value is too hight</span>
</span>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn" type="button">Cancel</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary" type="button" ng-disabled="editPayment.$invalid">Save</button>
</div>
</div>
</form>
</script>
working example on plunker
I need to close the popover via a "Cancel" button inside the popover.
It's possible? I need to extend the Angular UI Bootstrap library to do that?
Any help is appreciated.
The solution suggested in the linked answer close the popover when user click inside the popover, or outside the popover, but i need to close it by "close" button inside the popover.
The proper solution using the new popover-is-open attribute, as mentioned by #icfantv below, allows the use of controller scopes. I placed a live example in Codepen, and it goes like this:
app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller(
'myPopoverCtrl', ['$scope',
function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: 'myPopoverTemplate.html',
open: function open() {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = 'Hello!';
},
close: function close() {
$scope.myPopover.isOpen = false;
}
};
}
]);
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js">
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body
ng-app="ui.bootstrap.demo"
class="container">
<button
class="btn btn-danger"
ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="bottom"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open()">Click me!</button>
<script type="text/ng-template"
id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data" />
<button class="btn btn-success"
ng-click="myPopover.close()">Close me!</button>
</script>
</body>
Original answer:
I spent the last two days on this problem, and finally came up with a simple enough hack. This goes on my controller:
$scope.close = function(e) {
el = angular.element(e.target).closest("td"); // `td` is the parent of my clickable
// element, in this case a `span`
$timeout(function() { // need $timeout so we don't conflict with the digest loop
el.children(":first").trigger('close'); // couldn't select the `span` element directly
});
},
Now we set up the close trigger on the provider:
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'click': 'close', // Clicks now only open the tooltip, 'close' events close it.
});
}]);
And on my custom popover HTML template:
<button type="button"
class="btn btn-sm btn-success pull-right"
ng-click="close($event)">Close</button>
Voila! I can now close the popover through the button!
This solution for several ng-repeat popovers via isOpen field of popover's scope.
angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('PopoverDemoCtrl', function ($scope) {
$scope.template = 'myPopoverTemplate.html';
$scope.close = function(e) {
angular.element(e.target).parent().parent().parent().parent().scope().$parent.isOpen = false;
}
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="ui.bootstrap.demo">
<div ng-controller="PopoverDemoCtrl">
<button ng-repeat="item in ['First Popover','Second Popover','Third Popover']" popover-placement='bottom' uib-popover-template="template" popover-title="{{item}}" type="button" class="btn btn-default">{{item}}</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<button class='btn btn-danger' ng-click='close($event)'>Close Me</button>
</div>
</script>
</div>
</body>
Starting with Angular UI Bootstrap release 0.13.4, we've added the ability to programmatically close tooltips and popovers via the tooltip-is-open or popover-is-open boolean attribute.