I need to use a pdf viewer on my web app which is in anugularjs. I found Angular PDF viewer and it's ok for me. But I don't know what code insert to use it.
At the moment I've:
in html:
<div ui-content-for="title">
<span class="small"></span>
</div>
<div class="scrollable">
<div class="scrollable-content">
<div class="list-group">
<site-frame style="display:block; height: 100%;">
<pdf-viewer
delegate-handle="my-pdf-container"
url="pdfUrl"
scale="1"
show-toolbar="true"
headers="{ 'x-you-know-whats-awesome': 'EVERYTHING' }">
</pdf-viewer>
<button class="btn btn-default" ng-click="loadNewFile('position/file.pdf')">Load</button>
</site-frame>
</div>
</div>
</div>
in the controller:
'use strict';
var pdfControllerModule = angular.module('pdfControllerModule', ['ServiceOModule']);
pdfControllerModule.controller('pdfController',
['$scope','pdfDelegate', '$routeParams', 'Service_o', function($scope, pdfDelegate ,$routeParams, Service_o) {
$scope.pdfUrl = 'position/file.pdf';
$scope.loadNewFile = function(url) {
pdfDelegate
.$getByHandle('my-pdf-container')
.load(url);
};
}]);
what is incorrect and what code I insert?
Or If you know the correct code to insert in these two file, do you write me? Thanks Help me
I do not see any problem with the code. Just Make sure you have reference to the pdf.js in your main application module.
angular.module('app',['pdf'])
Also the html needs reference to the the pdf.combined and angular-pdf-viewer js files.
Related
I would like to implement dynamically added buttons to my Ionic app. I found that I can use the following code for this task.
The first part of the code I placed into the home.html file inside html body.
<div ng-controller="MyCtrl">
<div class="list list-inset">
<div class="item-input" ng-repeat="input in inputs">
<label class="item-input-wrapper">
<input type="text" placeholder="Type something" ng-model="input.value" />
</label>
<button class="button button-small button-balanced" ng-if="$index == inputs.length - 1" ng-click="addInput()">
<i class="icon ion-plus"></i>
</button>
<button class="button button-small button-assertive" ng-if="$index != inputs.length - 1" ng-click="removeInput($index)">
<i class="icon ion-minus"></i>
</button>
</div>
</div>
The second part of the code I placed to the home.ts file. I tried to place this code in the main class.
var app = angular.module('myApp', []);
app.controller("MyCtrl", function($scope) {
$scope.inputs = [{
value: null
}];
$scope.addInput = function() {
console.log("new input");
$scope.inputs.push({
value: null
});
}
$scope.removeInput = function(index) {
$scope.inputs.splice(index, 1);
}
});
Unfortunately, I cannot define a variable:
var app = angular.module('myApp', []);
Because I am getting a "Typescript error". Unfortunately, I don't know how to solve this problem. I hoped that some of you will know a solution and can help me with this problem.
The second part of the code I placed to the home.ts file
This statement suggests that you have created an ionic 2+ project(currently Ionic 3.x). This does not use angularjs (v 1.x) and uses angular 5.x instead.
If you want to start an ionic v1 project,
you need to set the type in your start command.
ionic start myApp blank --type=ionic1
Or you need to read up on latest angular docs here if you need to start an ionic v3 project.
I used angular js and ejs.
Repeat is good but, Database data does not come in.
How should I fix my code?
In this angularjs code
var app = angular.module('myApp', []);
app.controller('BasicCtrl20', function($scope, $http) {
$http.get("/concept_db")
.then(function(response) {
$scope.gridOptions4 = response.data;
});
});
In this my code
<div class="container">
<div ng-app="myApp" ng-controller="BasicCtrl20">
<div class="row">
<span style="line-height:30px"><br></span>
<div class="toggles">
<button id="showall">전체 제품 보기</button>
<button id="furniture">가구/인테리어</button>
<button id="homeappliances">디지털 가전</button>
<button id="life">생활/건강</button>
<button id="sport">스포츠/레저</button>
<button id="delivery">출산/육아</button>
<button id="fashion">패션잡화</button>
</div>
<div class="posts">
<div class="gallery">
<div ng-repeat="gridoptions in gridOptions4">
<div class="{{gridOptions.class}}">
<div class="gallery-item">
<a href="{{gridOptions.main_href}}">
<div class="gallery-item-image">
<img ng-src="{{gridOptions.imgsrc}}">
</div>
</a>
<div class="gallery-item-description">
<p align="center">{{gridOptions.name}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and reuslt
I want to import data from the database.
console log result
You have a bunch of elements, so there is clearly something there. ng-repeat does not create 20 elements from an error or thin air.
But the field name is probably wrong. It is not name (or name is actually empty on every item in the database!). Check that you got the field name right. Maybe its upper case Name or NAME or mispellt naem. Or something completely different like label or title.
the easy thing to do is to log the data when you get it, and see for yourself.
.then(function(response) {
console.log( response.data ); <-- look in the console!
scope.gridOptions4 = response.data;
Or since it's a GET-request. Right-click that link in your console XHR finished loading: GET "https://localhost:3000/concept_db". <-- Right-click, open in a new tab. It might not be the most easy thing to read, but it's a such a quick thing to just take a peek at data so you know what you are working with.
I was trying to collect JSON data from an API endpoint using AngularJS and that worked just fine. I was able to make list using the datas. Also tried to include an input to search. But the instant search with filter is not working. I double checked the syntax but seems like it is just fine. Any suggestions will be appreciated.
<label>Search: <input type="text" ng-model="search"> </label>
<div class="list-group">
<div ng-app="listBuilderFromJsonData" ng-controller="listDatasBootstrap">
<a href="#" class="list-group-item" ng-repeat="data in datas | filter:search">
{{data.title}}
</a>
</div>
</div>
<script>
var app= angular.module('listBuilderFromJsonData', []);
app.controller('listDatasBootstrap', function($scope, $http){
$http.get("https://api.end.point.url").then(function(response){
$scope.datas = response.data.items;
});
});
</script>
Place your ng-app at the root level. Here your textbox for search is outside ng-app
sorry for the rather basic question but I am really a beginner developing in AngularJS.
So I have a conteoller like this (like explaned here: https://github.com/johnpapa/angular-styleguide):
(function() {
'use strict';
angular
.module('project.management')
.controller('ManagementController', ManagementController);
function ManagementController() {
var vm = this;
vm.getUsersBySearchString= getUsersBySearchString;
////////////
function getUsersBySearchString(searchString) {
alert('get User By searchstring: ' + searchString);
}
};
})();
Now I have a HTML fragment in my template and I really don't know how to invoke function getUsersBySearchString(searchString). I have tried this one:
<div ng-controller="vm">
<form class="well form-search">
<label>Usersuche:</label>
<input type="text" ng-model="term" class="input-medium search-query" placeholder="Username">
<button type="submit" class="btn" ng-click="getUsersBySearchStringgetUsersBySearchString()">Suchen</button>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>
but I don't know what to put here
<div ng-controller="vm">
and how to invoke the method.
Thanks a lot for help!
<div ng-controller="vm">
That is incorrect. You have no controller named "vm". Your controller is named ManagementController.
The syntax for your use-case is
<div ng-controller="ManagementController as vm">
And to invoke the function, you would use
ng-click="vm.getUsersBySearchString(term)"
Note that the alias you choose in the HTML has no relationship with the alias you chose for thisin the controller code. You might very well use
<div ng-controller="ManagementController as managementCtrl">
and
ng-click="managementCtrl.getUsersBySearchString(term)"
I am trying to display a modal when the view is loaded.
Code :
//View
<div id="showCom" ng-controller="showmodalCtrl" ng-init="init()">
<div class="modal fade" id="companyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Please Select Company</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label class="control-label">Recipient:</label>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
//Controller
.controller('showmodalCtrl', ['$scope', function($scope){
$scope.init = function(){
$('#companyModal').modal("show");
}
}])
Everything works fine and the modal is displayed but I get this error on the console :
Type error : Cannot read property 'childNodes' of undefined
I have no idea why this is happening.
Also if I remove the "form" from the modal , i don't get any error. So I guess the problem is with the form but I am not able to resolve it.
Thanks in advance.
I had the same problem and I managed to resolve it by wrapping the modal open function inside a $timeout() or a normal setTimeout() function.
setTimeout(function(){
jQuery('#messageModal').modal('show');
}, 0);
I had the same error message when trying to use a JQuery plugin. Running it after document ready resolved the issue for me. The plugin was running fine but the angular code that followed in the current scope was not.
It was the "Set timeout"-answer in this thread that led me to try this solution.
Solution for me:
angular.element(document).ready(function () {
//Angular breaks if this is done earlier than document ready.
setupSliderPlugin();
});
As another solution in AngularJS context I'm using this approach:
Include $timeout module in your JS controller
Run init() function with all initializers like this:
$timeout(init, 0);
Works good.
Sorry for edit. Is your HTML well formed? Check that all the tags match.
In your code snippet, it looks like you're missing a closing div. check that - the one that closes the controller div.
I had a similar problem. It would throw an exception when i tried to add some html to dom and compile it using $compile in angularJs.
Inside of the html was another directive that tried to add some dom element from the page to somewhere else in the page.
I just had to call .clone of that element before i moved it to the new location.
And the exception was gone.
$popupContent = $(attrs.popupSelector).clone();
$container = $('<div class="popup-container"></div>');
$container.append($popupContent);
$container.hide();
$('body').append($container);