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>
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'm trying to update models from a JSON representation of an object to a form. Here's a link to an example
To recreate my issue,
Change the data in the form (see that the JSON changes).
Change the JSON (See that the form doesn't change).
Here's my code:
JS
var ppl = {
createdby: "foo",
dateCreated: "bar",
}
angular.module('myApp', [])
.controller("Ctrl_List", function($scope) {
$scope.people = ppl
$scope.print = JSON.stringify($scope.ppl)
})
HTML
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
<!-- FORM -->
<div class="row" ng-repeat="(key,val) in people track by $index">
<div class="col-md-12">
<label for="{{key}}">{{key}}</label>
<input class=form-control" id="{{key}}" ng-model="people[key]">
</div>
</div>
<!-- JSON -->
<div class="editable" contenteditable="true" ng-model="people">{{people}}</div>
</div>
</div>
When a user changes the JSON, the form should update in real-time.
Here's some things I have tried:
Change the JSON display element from div to input but it prints [Object][Object]
Also <input ng-model="JSON.stringify(people)"> but I get an "unbindable element" error.
Also tried adding a new model: $scope.print = JSON.stringify(people) but it shows nothing in the raw output.
Is it even possible to update a live object or am I gonna have to do some sort of event that triggers the form to change?
PS: Angular 1.5.8
There are several reasons why this doesn't work:
ng-model on a div doesn't do anything
even if it did, it would save a string to people, and your form would thus not work anymore.
You should use a textarea to make it work, and bind it to another variable, of type string. Using ng-change on the textarea, and on the inputs of the form, allows populating the people object by parsing the JSON string, and vice-verse, populating the JSON string from the people object.
See https://codepen.io/anon/pen/peexPG for a demo.
Refering to Contenteditable with ng-model doesn't work,
contenteditable tag will not work directly with angular's ng-model because the way contenteditable rerender the dom element on every change.
This will be very easy for you Angular monsters out there. I have two views ( a list view and a grid view) each in a partial html that is injected via ng-include on a click of a button. Like this:
<div class = "bar">
<h1>Contacts</h1>
</div>
<div ng-show="layout == 'list'" class="list">
//ng-include for the list page is here
</div>
<div ng-show="layout == 'grid'" class="grid">
//ng-include for the grid page is here
</div>
How can I initiate one of those views? grid for instance. I imagine it's done with ng-init. but I can't figure it out
Thanks!
You can initialize an variable either using ng-init or in controller variable declaration:
ng-init="layout === 'list'"
$scope.layout = 'list'
I'm new to Angular and have been searching for a was to pass data from an iteration inside ng-repeat to a table that ui-grid is making.
I have a JSON-object which is structured similar to this:
{
category1: {obj{atr1: val, atr2:val}, obj2{atr1: val, atr2:val}},
category2: {obj{atr1: val, atr2:val}, obj2{atr1: val, atr2:val}}
}
I'm using ng-repeat to iterate over it similar to this:
<div ng-repeat="(category, objs) in jsonObj">
<h3>{{category}}</h3>
<div ui-grid="{ data: objs}" class="grid"></div>
</div>
This works for displaying the category name () but I can't figure out how to pass the objs to ui-grid. What is the right way to do this? Can I make a function and call it through data: and get the data that way? If I use just gridOptions and define the data in the .js all tables will get the same data, can I pass some variable from where the tables are being iterated so I can chose the correct data for each?
Figured it out!
<div ng-repeat="(category, objs) in jsonObj">
<div ui-grid="{ data: jsonObj[category] }" class="grid"></div>
</br>
</div>
This along with making the corresponding values lists (thanks MMhunter) works.
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>