Here is response that i am getting from Api
data :
<style type="text/css">
<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
</style>
<span style="font-size:11pt;font-family:Calibri,Arial;font-style:normal;color:#000000;"
data-sheets-value="{"1":2,"2":"http://www.gov.ph/2001/08/11/republic-act-no-9155/\n\n\nhttp://deped.gov.ph/orders/do-13-s-2016\n\n\n\n\n\n\n\nhttp://www.gov.ph/1991/10/10/republic-act-no-7160/"}"
data-sheets-userformat="{"2":2112445,"3":[null,0],"5":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"6":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"7":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"8":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"10":1,"11":4,"12":0,"14":[null,2,0],"15":"Calibri","16":11,"24":[null,0,3,0,3]}"
>http://www.gov.ph/2001/08/11/republic-act-no-9155/<br>
<br><br>http://deped.gov.ph/orders/do-13-s-2016<br>
<br><br><br><br><br><br>
<br>http://www.gov.ph/1991/10/10/republic-act-no-7160/
</span>"
All above is data i am getting from api
so i just want show 300 character then ....
For show more or less function
Please help
Thanks in advance
Try this.
Your HTML
<div ng-app="yourAppName">
<div ng-controller="YourControllerName">
<p ng-show="showLink">{{lngStr|limitTo:300}}
show more
</p>
<p ng-hide="showLink">{{lngStr}}
hide
</p>
</div>
</div>
Your Controller
angular.module("yourAppName", ["your", "dependencies"])
.controller("YourControllerName", function ($scope) {
$scope.lngStr = the_Very_Long_String_You_Retrieve_From_Your_Api;
$scope.showLink = true; // Set the showLink to show onLoad
$scope.showMore = function () {
$scope.showLink = !$scope.showLink;
}
})
I'll edit this into a plunker when I have a better internet connection.
Related
i'm kind of new using AngularJs framework and i am not that good in English. so i hope somebody can help me solve my problem and never mind my grammar hehe. i know mostly of progress bar in angularjs triggered by ng-show, but what if i want to put a progress bar before an object tag loads. for example
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<object width="400" height="400" data="file.pdf"></object>
</div>
</div>
let assume that that "file.pdf" is being fetch from the server. that being said it needs time to load, so i want to put a progress bar on that time while the data if being fetch from the server and hide it when the object is fully loaded thank you guys.
data flow example :
(file.pdf) ----Fetching---- [controller]----Progress bar--View(html)
Hope this will help you out. This is a basic example for showing and hiding a spinner bar on button click.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: 0 auto;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
html, body, container {
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body ng-app="changeExample">
<div class="container" ng-controller="ExampleController">
<button class="btn" ng-click="ShowSpinner()">Show Spinner</button>
<button class="btn" ng-click="HideSpinner()">Hide Spinner</button>
<div ng-if="ShowSpinnerStatus" class="loader"></div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.ShowSpinnerStatus = true;
$scope.ShowSpinner = function(){
$scope.ShowSpinnerStatus = true;
};
$scope.HideSpinner = function(){
$scope.ShowSpinnerStatus = false;
};
}]);
</script>
</body>
</html>
You can show and hide the spinner on a service call like this.
$scope.ShowSpinner();
LoginService.authenticateUser(userName, password).then(
function(response){
$scope.HideSpinner();
if( response.isSuccess ){
// Login Success
}
else{
//Login Fail
}
},
function(error){
//Network related error
$scope.HideSpinner();
}
);
Your English is really good and you need not worry about it at all. Coming back to your question, you are on the right path. You would need to use ng-show or ng-hide, whatever you choose. Let's say you choose ng-show In your controller, you would declare a variable,
$scope.isProgessBarVisible = true;
and then, within the controller itself, upon return from http call from the server, you would set it to false.
$http.get('someUrl')
.then(function successCallback(response) {
//load you pdf file content
$scope.isProgessBarVisible = false;
}
And in the HTML
<div class="progress">
<div class="progress-bar" role="progressbar" ng-show="isProgessBarVisible" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<object width="400" height="400" data="file.pdf"></object>
</div>
With this in place, the progress bar will show up until the file is fetched from server and displayed.
I think the problem is not just about showing/hiding the progress bar, perhaps it is about how to hide the progress bar when the <object>'s content finish loading.
Initially, I tried to use ng-load on the <object> but somehow it didn't work. So I tried to use onload which does work. But since the onLoad() handler function is outside angular environment, I had to get back the angular scope to be able to set the variable $scope.showProgress that will hide the progress bar.
See the plunkr yourself, and let me know if that is what you are looking for.
Plunkr https://plnkr.co/edit/wxgetLZdST0WcPEHyraZ
Note: I don't know whether it is possible to get the progress status number (% loaded), but at least we can show "Loading..." or a spinner icon while the <object> is loading.
http://chieffancypants.github.io/angular-loading-bar/
angular.module('app', ['angular-loading-bar']);
angular-loading-bar is a good option for $http calls
I have a div-layer which dynamically loads html-partials from the server. The template variable is changed when a link in the navigation is clicked.
<div id="ajaxwrapper" ng-include="template">
</div>
This works fine. But the templates need a short time to load and during that time the user doesn't get any kind of response. Thats why I want to display a spinner until the template is load. Sadly I don't know how.
My links look something like this:
<a ng-click="navi($event)" href="www.someurl.de">Text</a>
The navi-function looks like this:
$scope.navi = function (elem) {
elem.preventDefault();
var urlstring = "";
if (typeof elem.target.href !== 'undefined') {
urlstring = elem.target.href;
$location.path(elem.target.pathname).search({ knt: $scope.aktuellesVertragskonto.nr });;
} else {
urlstring = elem.target.baseURI
$location.path("/");
}
$scope.template = $location.absUrl();
};
I need some pointers on how to implement a spinner. Thank you :)
The spinner-template would look like this:
<script type="text/ng-template" id="loader">
<div class="text-center">
<img src="~/images/spinner/ajax-loader.gif" /><br />
Loading
</div>
The ng-include directive includes an onload expression (reference), so you can do something like this:
<div id="ajaxwrapper"
ng-show="loaded"
ng-include="template" onload="loaded = true">
</div>
<div class="text-center"
ng-hide="loaded">
<img src="~/images/spinner/ajax-loader.gif" /><br />
Loading
</div>
There is another way as well, as ng-include override inside div html so you can show loader till template loads.
You can put loader inside the div as below.
<div id="ajaxwrapper" ng-include="template">
// Show loader image or css
</div>
I use AntiXss Encoder on serverside for XSS atacks so all response includes html unescape characters like "<:script>:alert(1);<:/script>:" (replaced ';' as ':')
on binding i use sanitize with ng-bind-html there is no problem wih that.
There is an other control input for update mode. When user needs to update text they click update icon then i show textarea and hide binded tag with ng-if. textarea has ng-model attr. i cant escape html characters on textarea like ng-bind-html here is the snippet pls help im getting creazy..
in fiddle; edit mode textarea must display "<script>alert(1);</script>" with no alert action and data will be sent to the server must display same too...
here is the fiddle
var app = angular.module('myApp',['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce, $sanitize) {
$scope.post1 = "<script>alert(1);</script>";
//$scope.post2 = $sce.parseAsHtml("<h1>alert(1)</h1>");
$scope.logs = ["log created"];
$scope.log = function(val){
$scope.logs.push(val);
}
});
.label {
text-decoration:underline;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="label">Edit mode :</div>
<textarea ng-model="post1" style="width:100%;" rows="5"></textarea><br />
<div class="label">Binding mode :</div>
<div ng-bind-html="post1"></div><br />
<div class="label">Data will be send to the server :</div>
<div>{{post1}}</div><br />
<div class="label">Logs (if needed) :</div>
<div ng-repeat="d in logs">
<p>{{($index+1) + ". " + d}}</p>
</div>
</div>
</div>
I am very new to angularjs, i have done some experimental projects in Polymer 0.5, so new to Polymer 1.0 as well.
I am facing an issue like inside ng-repeat i want to display some paper-card.
This issue is only on Chrome browser, In Firefox and IE-edge it is coming fine.
<paper-card heading="{{ team.name }}">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
//--------------------------- HTML ----------
<div class="row content">
<div><h3>Teams <img ng-show="loading" ng-src='images/loader2.gif' width="30px" height="30px"/></h3></div>
<div ng-repeat="team in teams" ng-repeat="team in teams | filter:teamsFilter">
<div>
<style>
.collapse-content {
padding: 15px;
border: 1px solid #dedede;
}
</style>
<paper-card heading="{{ team.name }}">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
</div>
</div>
</div>
//--------------------------- HTML -------------
I am using ng-polymer-element module,
I have the below code in my application app.js
angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
paperCard: {
ngModel: function property(element) {
return element.hasAttribute('multi') ? 'selectedValues' : 'selected';
},
ngHeading: '=heading'
}
});
window.addEventListener('WebComponentsReady ', function() {
angular.bootstrap(wrap(document), ['myApp']);
});
The Card header is coming fine but the binding variable is also displaying inside the card.
I inspect the HTML in the browser, i could see the paper-material is added twice and the second one is showing the brackets as it is.
Any help is highly appreciated. Thanks.
Most likely that Angular is not loaded properly; therefore, it hasn't kicked in to evaluate the expressions in the braces. Please post your entire HTML page.
I'm trying to implement a mechanism to hide / show div within a group meaning that I want to only have one div displayed for the group. Of course, I can implement this using the ng-show directive but I would like to have something more generic.
For example:
<div div-group="mygroup">
<div id="div1"> ... </div>
<div id="div2"> ... </div>
<div id="div3"> ... </div>
</div>
If I call a function like showDiv("div1"), other div would be hidden (div2 and div3). I thought about adding an object on the root scope containing all inner div status (displayed or hidden).
Thanks very much for your help!
Thierry
One way could be using ng-class
.show{
display:block
}
.hide{
display:none;
}
<div div-group="mygroup">
<div id="div1" ng-class={true:'show',false:'hide'}[selecteddiv='div1']> ... </div>
<div id="div2" ng-class={true:'show',false:'hide'}[selecteddiv='div2']> ... </div>
<div id="div3" ng-class={true:'show',false:'hide'}[selecteddiv='div3']> ... </div>
</div>
$scope.choose=function(id){
$scope.selecteddiv=id;
}
So you could pass proper id as string in function
If you want to do this in vanilla js, you just can write your showDiv function like this
function showDiv(id) {
//hide all divs
document.findElementById('div1').style.display = 'none';
document.findElementById('div2').style.display = 'none';
document.findElementById('div3').style.display = 'none';
//show just the div you want
document.findElementById(id).style.display = 'block'; //or whatever it was before
}