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>
Related
I am using bootbox, I need display product information in it. The product information is returned as json with rest call. I am thinking using a template, and transform from the json to html. I need ng-repeat etc, in the template. The idea way is I can call template and get a html result.
But it seems angularjs $compile need bind to element to render. any idea?
I think you can use ng-include:
var app = angular.module('myApp', []);
app.controller('productCtrl', function($scope) {
$scope.productInfos = [];
});
Use ng-include (You have to the adjust the path depending the location of your template)
<div ng-app="myApp" ng-controller="productCtrl">
<div ng-include="'product-information.html'"></div>
</div>
You can do ng-repeat in product-information.html:
<div ng-repeat= "info in productInfos"> {{ info.prop1 }}</div>
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
Is there a way to add chart data from ng-repeat.
like this:
<div ng-repeat="(key, value) in chartData">
<canvas style="padding:5px" tc-chartjs-pie chart-options="chartOptions" chart-data="{{key}}">
</div>
I am trying to add multiple charts to the page and I am using dynamic data from the controller. I cant seem to find any reference in the docs.
If you are trying to output data from the controller assuming your controller has something like this:
$scope.chartData[yourDynamicVar] = [
.... chart data
]
you can do this:
<div ng-repeat="(key, value) in chartData">
<canvas tc-chartjs-pie chart-options="chartOptions"chart-data="chartData[key]"></canvas>
</div>
I am getting the Array Response ["item1","item2"] from the server. but i want to display the data as item1 and item2 in one by one in UI using angularjs. So, Please give me the solution?
use ng-repeat
<span ng-repeat="item in items">{{item}}</span>
First of all, your response is wrong for your requirement I guess. I should be {"items":["veg", "rotis", "Dalu"]}, then you can assign to a scope like $scope.items = yourResponse.items; in controller and in html you can ng-repeat it like,
<span ng-repeat="item in items" ng-bind="item"></span>
and if you can't change your response, if it had to come like you mentioned, then you can do it in following way.
in controller,
var items = yourResponse.items[0];
$scope.items = items.split(',');
html same as above,
<span ng-repeat="item in items" ng-bind="item"></span>
I am trying to use an ng-repeat that includes an ng-include. The problem is that the first element in the ng-repeat is just the ng-include template with none of the data from the ng-repeat filled in. Is there a way I can somehow bind the template from the ng-include so it works on the first ng-repeat?
<div ng-repeat="item in items">
<div ng-include src="'views/template.html'"></div>
</div>
For example, if my ng-repeat contains 10 items, then the first item that is rendered will just be the empty template. Items 2-10 WILL be rendered as they should be. What am I doing wrong?
First make sure that the data that is contained in the first index of items actually has the data that you want.
One possible solution to your problem would be to simply not show the first index of the ng-repeat:
<div ng-repeat="item in items" ng-show="!$first">
<div ng-include src="'views/template.html'"></div>
</div>
This may not actually tackle the root of your problem, but it may still get your application working a bit more like what you expect.
Another possible solution:
<div ng-repeat="item in items" ng-include="'views/template.html'"></div>
see example here:
http://plnkr.co/edit/Yvd73HiFS8dXvpvpEeFu?p=preview
One more possible fix just for good measure:
Use a component:
html:
<div ng-repeat="item in items">
<my-include></my-include>
</div>
js:
angular.module("app").directive("myInclude", function() {
return {
restrict: "E",
templateUrl: "/views/template.html"
}
})
I ran into the same problem, and finally figured out that the first element has not been fetched and compiled in time for the first ng-repeat iteration. Using $templateCache will fix the problem.
You can cache your template in a script tag:
<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>
Or in your app's run function:
angular.module("app").run(function($http, $templateCache) {
$http.get("/views/template.html", { cache: $templateCache });
});
You can also use $templateCache inside your directive, although it's a bit harder to setup. If your templates are dynamic, I would recommend creating a template cache service. This SO question has some good examples of template caching inside a directive and a service:
Using $http and $templateCache from within a directive doesn't return results
Using a directive worked for me: https://stackoverflow.com/a/24673257/188926
In your case:
1) define a directive:
angular.module('myApp')
.directive('mytemplate', function() {
return {
templateUrl: 'views/template.html'
};
});
2) use your new directive:
<mytemplate />
... or if you're concerned about HTML validation:
<div mytemplate></div>