I am new in AngularJS.
I am fetching data from the Rest API and displaying it on the page.
My Supposed code is giving below.
$http.get(local_url+'/data').
then(function(response) {
$scope.data = response.data.client_data;
});
Now when suppose I write.
<p>{{ data.name }}</p>
So when i come on page, it is showing above {{ data.name }} code after sometime it is showing any name.
=============================================================
Solution.
I used in body tag like that. <body ng-cloak> It will work.
thanks.
What you could do is define the $scope.data before the $http as an empty string
$scope.data = "";
You also could use the build in ngCloak directive. This will prevent AngularJS from displaying the $scope in its raw form.
You can find more info about it inside the AngularJS docs here
Another option would be to use the ng-if or ng-show expression, to check whether a value isset or not before rendering the element.
<p ng-if="data.name">{{data.name}}</p>
or
<p ng-show="data.name">{{data.name}}</p>
Where ng-if clones the element and appends it to the document when the expression is true and ng-show just toggles a display: none; or display: block; state on the element.
Helpfull Links:
ng-if documentation
ng-show documentation
Related
I have static page with articles and I would like to fill number of likes for each article from json with angularjs. Is that posible or do I need to load whole page as template and fill all the detail with ng-repeat?
Is there something like
$("#like id" + i).val(jsonarray[i])
for angularjs?
Assign the array to the scope and use the interpolation {{ }} and ng-repeat in the HTML
JS Controller:
$scope.jsonarray = jsonarray;
HTML:
<div ng-repeat="value in jsonarray">{{value}}</div>
Or:
<div id="like">{{jsonarray[0]}}</div>
I am working on an app that submits the form and get the result from the server which followed by HTML table view. My input form is a bit big which covers whole the screen. When the table comes then I want automatically scroll down at the table view. I used $anchorScroll from angularJs. But I am not able to achieve the result what I want. I also used $timeout to make sure the table is already exist or not and then perform $anchorScroll, but still no success. (based on this solution : Using $location and $anchorScroll to scroll a table row into view
Hear is my code.
HTML
<div data-ng-controller="searchController as searchCtrl" id="scrollArea">
<form>
//HTML input elements
<div class="buttons">
<md-button class="md-primary md-raised" ng-click="searchCtrl.gotoTable('resultTable')">Start</md-button>
</div>
</form>
</div>
<!-- Smart Table for displaying result -->
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">
//table content
</div>
Controller
angular.module('myApp')
.controller("searchController", function($log, searchService, $scope, $location, $anchorScroll, $timeout){
var self = this;
self.gotoTable = function(resultTable)
{
$timeout(function() {
$location.hash(resultTable);
$anchorScroll();
});
};
});
I dont know why its not working?
Do i need to define the id scrollArea and resultTable in my CSS?
Any help would be appreciated.
Thanks in advance.
UPDATE
Based on Okazari's solution, I tried to put a another div with many br tag above at the very bottom of my HTML. Now When I refresh the page then it automatically scroll to that div tag without clicking Start. this is a bit weird. I also tried to cover the
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">
tag with another div tag with id = "resultTable".
But still it did not work.
You actually are invoking your function without any parameters
ng-click="searchCtrl.gotoTable()"
whereas in your controller you expect to have one :
self.gotoTable = function(resultTable)
Try something like this
ng-click="searchCtrl.gotoTable('resultTable')"
or this :
self.gotoTable = function()
{
$timeout(function() {
$location.hash("resultTable");
$anchorScroll();
});
};
(just one, not both)
Hope it helped.
EDIT : Pretty sure that you can't go to a hidden div. As i said in comment your ng-show may be evaluated to true when you try to anchorscroll().
Here is a working plunker without ng-show. I'll build a tiny solution to avoid the ng-show issue.
To avoid this side effect, i wrapped the div with ng-show with another div.
<div id="resultTable">
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0">
</div>
i have written angular js expression in razor for html helper but when i refresh the page after loading once it shows the expression, that is irritating.. what is the problem
here is the code
#Html.EditorFor(model => model.Questions.Question, new { htmlAttributes = new { ng_model = "quest" } })
{{quest}}
Instead of using curly binding expressions, you can use ngBind:
<span ng-bind="quest"></span>
Or you can use ngCloak:
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
<body ng-app="" ng-controller="ctrl" ng-cloak>
{{ quest }}
</body>
I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
I want to hide a text message while the js is loading and data binding is not yet applied. I have tried something like this but its always hiding the message
.hide { display: none; }
<div class="hide" ng-hide="haveRecords">No Records found</div>
If I remove the class hide from div. then this element is shown for some milli-seconds before the data binding is applied. How to fix it?
This is what ngCloak is for.
You can use it like this:
<head>
...
<style>[ng-cloak] {display: none !important;}</style>
</head>
<body>
...
<div ng-cloak ng-hide="haveRecords">No Records found</div>
NOTE: The style in the head is only required if you include the AngularJS script at the end of body (which is a good idea anyway).
You should use ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
Code
<div ng-hide="haveRecords" ng-cloak>No Records found</div>