I am using AngularJs to display a few checkboxes. I have a click event which writes the current html to a window using document.write. However, when the new window opens for printing, none of the checkboxes are checked.
Here is the function which prints the document to the window:
$scope.printForm = function () {
var doc = document.getElementById('myForm').outerHTML;
var myWindow = $window.open('', '', 'width=1100, height=1000');
myWindow.document.write(doc);
myWindow.print();
};
Here is the HTML for the checkboxes:
`<div ng-repeat="c in f.Choices" >
<input type="checkbox" ng-disabled="true" ng-model="c.isSelected" /> {{c.vchDescription}} </div>`
Here is what it looks like BEFORE I click "printForm"
And here is what it looks like after I click "printForm":
Any assistance is greatly appreciated.
Mehod #1: generate HTML
Model is passed to print-button directive. It generates HTML and writes it to the opened window.
SO does not allow to open new windows. See working example on Plunkr.
Method #2: use CSS media queries
There's no need to open a new window. Just style document for print media accordingly.
angular.module('app', [])
.controller('AppController', function($window) {
this.options = [
{label: 'Foo', checked: false},
{label: 'Bar', checked: true}
];
// if you just need to print
this.print = function() {
$window.print();
};
})
// directive to generate HTML from model
.directive('printButton', function($window) {
return {
template: '<button ng-click="generate()">Open in new window</button>',
scope: {
data: '='
},
link: function(scope) {
scope.generate = function() {
var win = $window.open("", "bar", "width=200,height=100");
var html = '';
scope.data.forEach((val) => {
html += '<input type="checkbox"' + ((val.checked) ? ' checked=checked' : '') + '"/><label>'+val.label+'</label>';
})
win.document.write(html);
}
}
}
});
#media print {
.not-printable {
display: none;
}
}
<html ng-app="app" ng-controller="AppController as app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<h1 class="not-printable">This will not be printed</h1>
<div ng-repeat="opt in app.options">
<input type="checkbox" ng-model="opt.checked" /><label ng-bind="opt.label"></label>
</div>
<div class="not-printable">
<div print-button data="app.options"></div>
<button ng-click="app.print()">Simply print</button>
</div>
</body>
</html>
Figured this one out by accident. Changing ng-model="c.isSelected" tp ng-checked="c.isSelected" allowed the checkmarks to show in the checkboxes.
Simple code change below solved it:
<div ng-repeat="c in f.Choices" >
<input type="checkbox" ng-disabled="true" ng-checked="c.isSelected" checked/> {{c.vchDescription}}
</div>
Related
I have tried a few things currently from what I could search online however I, unfortunately, haven't found anything.
enter image description here
I would like to disable the pagination when I click on the replace button. Since it's loading with a spinner and there is a wait I thought it would make sense to disable it but not remove it. I know how to remove, both on the css side and angularjs. However, in all honesty, I am unsure how to disable this particular feature compared to other works that I have done.
HTML:
<button class="btn btn-blue" ng-click="handleLoadAndDeactivate()"
ng-show="'Load' == importAction && 0 == errors"
title="Load">
Replace
</button>
AngularJS (Button):
$scope.handleLoadAndDeactivate = function () {
$scope.onCompleteData.targetBody.withDeactivation = true;
onComplete($scope.onCompleteData, $scope.handleLoadAndDeactivateCompleted);
};
AngularJS (Table):
$scope.operationsPreloadCompletedTableOptions = new NgTableParams({}, {
dataset: importLog
});
html
Here's how you could achive this:
(function () {
"use strict";
const app = angular.module("app", []);
app.controller("app.AppCtrl", ($scope, $timeout) => {
$scope.disablePagination = false;
$scope.handleReplace = () => {
$scope.disablePagination = true;
//Your replace logic goes here
$timeout(() => {
$scope.disablePagination = false;
}, 2000);
};
}
);
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
<button ng-disabled="disablePagination"><</button>
<button ng-disabled="disablePagination">1</button>
<button ng-disabled="disablePagination">2</button>
<button ng-disabled="disablePagination">></button>
<button ng-click="handleReplace();">Replace</button>
</div>
i'm using a AngularJS custom directive to implement html file input.I used an open source library which is on Github.But when i'm trying to access the scope value from the controller, it's showing as undefined variable.
Following is the directive code,
angularApp.directive('file', function() {
return {
restrict: 'AE',
scope: {
file: '#'
},
link: function(scope, el, attrs){
el.bind('change', function(event){
var files = event.target.files;
var file = files[0];
// scope.file = file;
scope.file = file;
scope.$parent.file = file;
scope.$apply();
});
}
};
});
Following is the html code
<input type="file" class="form-control" name="file" required>
But here in the html code other html snippets have ng-models which is binding to a scope object.As an example,
And this uses a ng-submit attribute with addNewUser(resources.newUser)
Following is part of controller code
$scope.addNewUser = function(data) {
console.log('FILE PATH IS :' + $scope.file);
}
use directive as attribute to the element as file="file".
<input type="file" class="form-control" name="file" required file="file" >
Check the demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.file ;
$scope.addNewUser = function(data) {
console.log( $scope.file);
}
}).directive('file', function() {
return {
restrict: 'AE',
scope: {
file: '#'
},
link: function(scope, el, attrs){
debugger
el.bind('change', function(event){
var files = event.target.files;
var file = files[0];
// scope.file = file;
scope.file = file;
scope.$parent.file = file;
scope.$apply();
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="file" class="form-control" file="file" name="file" required>
<button ng-click="addNewUser()">aaa</button>
</div>
I am working on a simple react example that will alter the content of a header on the screen based on what a user enters in a text field. Here's the react code:
var GreeterForm = React.createClass({
onFormSubmit: function(e){
e.preventDefault();
var name = this.refs.name;
this.refs.name.value = '';
this.props.onNewName(name);
},
render: function(){
return(
<form onSubmit={this.onFormSubmit}>
<input type="text" ref="name"/>
<button>Set Name</button>
</form>
);
}
});
var Greeter = React.createClass({
//returns an object of the default properties to be used
//these are used if no properties are passed in
getDefaultProps: function(){
return {
name: 'React!',
message: "this is from a component!"
};
},
//maintains a state for the component. Maintains the state as an object
//this is a default method for react and we override it.
getInitialState: function(){
return {
name: this.props.name
};
},
handleNewName: function(name){
this.setState({
name: name
});
},
//renders the greeter react component
render: function() {
var name = this.state.name;
var message = this.props.message;
return (
<div>
<h1>Hello {name}!</h1>
<p>{message}</p>
<GreeterForm onNewName={this.handleNewName}/>
</div>
);
}
});
var firstName = "DefaultName";
var mess = "This is a message from react."
//note that name and message are passed in as properties
ReactDOM.render(<Greeter name={firstName} message={mess}/>, document.getElementById('app'));
You can see that GreeterForm is nested within Greeter and is supposed to alter the content of the h1 tag when the user submits.
However, the content of the h1 tag is not changing. I sprinkled alert(name.value) along the code to ensure the correct name from the input field was being passed around, and that all checked out.
What could it be? Is something wrong with my setState function?
Here's the HTML if needed:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
You are not sending value of input. you are sending whole html element
in onFormSubmit function change this line
var name = this.refs.name;
to
var name = this.refs.name.value;
Here's my fiddle: http://jsfiddle.net/VSph2/280/
I'm trying to uncheck a checkbox and reset the values of a scope variable with a link, however, it doesn't seem to work. Could someone help?
Javascript:
var app = angular.module('myApp', []);
app.controller('IndexCtrl', ['$scope', function($scope) {
$scope.colors = [
{id: 1, name: "Blue"},
{id: 2, name: "Green"},
{id: 3, name: "Red"}
];
$scope.color_ids = [];
$scope.clearAll = function() {
angular.forEach($scope.color_ids, function(color_id) {
color_id.checked = false; //nothing works!!
color_id.selected = false; //
});
$scope.color_ids = [];
$scope.color_ids.selected = false; //doesn't work either
};
}]);
HTML:
<div ng-controller="IndexCtrl">{{1+1}}
<h2>Products</h2>
<div class="filters col-two">
<a ng-click="clearAll()">Clear all filters</a>
<h3>Color</h3>
<div ng-repeat="color in colors">
{{ color.name }} <input type="checkbox" ng-model="color_ids">
</div>
</div>
</div>
You never add anything to the color_id array, so the foreach is not iterating over anything.
I updated your code to just use the main color array and add a selected property on it:
http://jsfiddle.net/VSph2/283/
html:
{{ color.name }} <input type="checkbox" ng-model="color.selected">
javascript:
angular.forEach($scope.colors, function(color_id) {
color_id.selected = false;
});
I came across this while looking for something similar, my solution is to reset the color_ids object
$scope.clearAll = function() {
$scope.color_ids = [];
};
You also need to make the following changes to the input
<input type="checkbox" ng-model="color_ids[color.id]" ng-checked="color_ids[color.id]">
jsfiddle at
https://jsfiddle.net/novelnova/VSph2/756/
You are misunderstanding what ng-model on a checkbox does. It will only toggle a specific value set. So in your example, you would want to change it to:
{{ color.name }} <input type="checkbox" ng-model="color.selected">
And then your colors will have an additional attribute called selected that is either true or false, depending on if the box is checked or not.
To clear, you would then loop over all colors and set their selected state to false.
$scope.clearAll = function() {
angular.forEach($scope.colors, function(color) {
color.selected = false;
});
Updated fiddle: http://jsfiddle.net/VSph2/285/
My code have the main windonw and one iframe and each one with your module. A button in main window fires click event that should append html into iframe, the new html when appended into that should apply interceptors and directives properly, but it doesn't work!
Angular javascript:
angular.module('module1',[]).controller('Controller1', function ($scope) {
$scope.get = function(){
$http.jsonp("some_url_here").success(function(html){
$scope.content = html;
});
}
}).directive('click', function($compile) {
return {
link: function link(scope, element, attrs) {
element.bind('click',function(){
var unbind = scope.$watch(scope.content, function() {
var div=document.getElementById("frame").contentWindow.angular.element("divId");
div.append($compile(scope.content)(div.scope()));
unbind();
});
});
}
}
});
angular.module('module2',[]).directive('a', function() {
return {
restrict:'E',
link: function(scope, element, attrs) {
console.log('ping!');
console.log(attrs.href);
}
};
});
Html code:
<html ng-app="modile1">
<div ng-controller="Controller1">
<button type="button", ng-click="get('any_value')", click:""/> Load frame
</div>
<iframe id="frame" src="/please/ignore/this">
<!-- considere the html as appended from iframe-src and contains ng-app="module2" -->
<html ng-app="module2">
<div id="divId">
<!-- code should be inject here -->
</div>
</html>
</iframe>
</html>
Please, considere that angularjs, jquery if applicable, modules-declaration as well as headers are loaded properly.
I'd like to load the html content from main-frame/window into iframe and run interceptors and directives properly. Is it possible? If yes, how can I do it?
Thanks for advancing!
I've tried this code and it seems work fine! I found it here: http://www.snip2code.com/Snippet/50430/Angular-Bootstrap
var $rootElement = angular.element(document.getElementById("frame").contentWindow.document);
var modules = [
'ng',
'module2',
function($provide) {
$provide.value('$rootElement', $rootElement)
}
];
var $injector = angular.injector(modules);
var $compile = $injector.get('$compile');
$rootElement.find("div#divId").append(scope.content);
var compositeLinkFn = $compile($rootElement);
var $rootScope = $injector.get('$rootScope');
compositeLinkFn($rootScope);
$rootScope.$apply();