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
Related
Im quite new with angular. What am i freaky about is that following code is showing empty buttons (edit/delete) even if it looks empty (on start) :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">
<h2>todo</h2>
<form ng-submit="todoAdd(item)">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in todoList">
<span ng-bind="x.todoText"></span><button id="#edit" ng-click="edit(item)">edit</button><button ng-click="remove(item)">delete</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.todoList = [{}];
$scope.todoAdd = function(item) {
$scope.todoList.push({todoText:$scope.todoInput);
$scope.todoInput = "";
};
$scope.remove = function(item) {
var index = $scope.todoList.indexOf(item);
$scope.todoList.splice(index, 1);
};
$scope.edit = function(item) {
//function
};
});
</script>
</body>
</html>
And also can somebody to help me after clicking on edit to push todoText to input and change caption of addnew to save? and afterthen change it to addNew again?
Thank you very much
Replace line
$scope.todoList = [{}];
to
$scope.todoList = [];
Then, it wouldn't show you empty line.
//Full code.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">
<h2>todo</h2>
<form>
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="button" value="{{actionName}}" ng-click="todoAdd()" />
</form>
<br>
<div ng-repeat="x in todoList">
<span>{{x.todoText}}</span><button id="#edit" ng-click="edit(x)">edit</button><button ng-click="remove(item)">delete</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.todoList = [];
$scope.actionName = 'Add';
$scope.todoAdd = function() {
if($scope.actionName === 'Add'){
$scope.todoList.push({todoText:$scope.todoInput});
$scope.todoInput = "";
} else {
var index = $scope.todoList.indexOf($scope.temp);
console.log('index: ' + index);
$scope.todoList.splice(index, 1, {todoText:$scope.todoInput});
$scope.actionName = 'Add';
}
};
$scope.remove = function(item) {
var index = $scope.todoList.indexOf(item);
$scope.todoList.splice(index, 1);
};
$scope.edit = function(item) {
$scope.todoInput=item.todoText;
$scope.temp = item;
$scope.actionName = 'Save';
};
});
</script>
</body>
</html>
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.
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>
please look at this code. My button must call function checkResults() from controller CtrlTwo.
How to do this?
var myApp = angular.module('myApp', []);
function CtrlOne($scope){
$scope.greet = 'Hi! ';
}
function CtrlTwo($scope){
$scope.$emit('checkResults', function(){
alert('Function is called!');
}
);
}
<body ng-app="myApp">
<div ng-controller="CtrlOne">
{{greet}}
<input type="submit" class="btn btn-primary pull-right" value="Check results" ng-href='#here' ng-click='checkResults()'/>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</body>
Here, hopefully this example will help you:
Javascript:
var myApp = angular.module('myApp', []);
myApp.controller('CtrlOne', function($scope){
$scope.greet = "hi!"
var nTimes = 0;
$scope.$on('myEvent', function(){
$scope.greet = "Hi! The event has been called " + (++nTimes) + " times";
});
});
myApp.controller('CtrlTwo', function($scope){
$scope.emitCustomEvent = function(){ $scope.$emit('myEvent'); };
});
View:
<div ng-app="myApp">
<div ng-controller="CtrlOne">
{{greet}}
<div ng-controller="CtrlTwo">
<input type="button" value="Check results" ng-click="emitCustomEvent()" >
</div>
</div>
</div>
Working Example