Hi there i'm trying prnting a simple json object to a div:
<div ng-repeat=" i in config.app_genres.genres">
{{ i }}
</div>
and
config.app_genres = {
"genres":["asd","ips"]
}
what's wrong with this?
Also how can i log config.app_genres in a view?
Have a look at this plunk.
As for logging config.app_genres in the view, not sure what you mean, care to elaborate?
Related
I have about 1000 Ui components to render, Which includes ion-range,ion-select with JSON data.
I am assigning my JSON Object array to the variable and rendering the components in HTML with *ngFor.
For e.g. :
In .ts :
let jsonArray=this.jsonData;
In .HTML :
<div *ngFor="let array of jsonArray">
// MY COMPONENTS
</div>
Now, I am getting data in variable ion less than 1ms. But my components taking so much time to render and it feels like screen is freezed.
Issue 1 : Can we reduce this rendering time by using anything other than this approach?
Issue 2 : Can we Add spinner or loading until its completes its rendering?
PS.: I am mentioning here that I have no issues with getting my data as it is from local sqliteDB. My Ui is getting stucked only while rendering the 1000 components.
UPDATE of .ts file
onSelect(dbId) {
this.dbService.getData(dbId).then(data => {
this.toDisplayArray=data.set;
})
}
Update of .HTML file
<ion-select interface='popover' (ionChange)='onSelect($event.detail.value)'>
<ion-select-option *ngFor="let set of deviceList; let i of index" value="{{set.Id}}">
{{set.name}}</ion-select-option>
</ion-select>
<div *ngFor="let set of toDisplayArray;let i = index">
<div *ngIf="set.type==="range">
<range [id]="set.id" [title]="set.title"></range>
</div>
<div *ngIf="set.type==="select">
<select[id]="set.id" [title]="set.title"></select>
</div>
<div *ngIf="set.type==="both">
<range-select [id]="set.id" [title]="set.title"></range-select>
</div>
</div>
so range,select and range-select are selector of my child components where I am passing the data through input and output.
How to use *ngIf to check if an element exists in an Object?
.ts file
this.data = ["cat", "dog"];
I want to check, in my html file, if cat exists in the object this.data or not. Can I do that with an *ngIf ?
you can create a function in your ts file to check if the wanted string exists in the array or not like this :
doesExist(animal: string): boolean {
return this.data.includes(animal);
}
and then call it in your html file :
<div *ngIf="doesExist('cat')"> [...] </div>
<div *ngIf="data.includes('cat')">hello world</div>
I hope this will help.
You can use ngFor first to iterate every element in a loop and then use ngIf to check if value exist or not.
for example:
<div *ngFor="let element of data">
<div *ngIf="element.cat">
</div>
</div>
Another method is make seperate function for this but I think this is easy way to do.I hope it will help you.:)
Recently ran into a problem where knockout binding to html comments were not well formed because of a nesting problem. I used where an html comment to house a ko if: and then used ko foreach which was bound to an html <div>, but managed to get the nesting wrong. Below is an example of the issue:
<!-- ko if: isGuestCheckout() -->
<div data-bind="foreach: formSection()">
<!-- /ko>
Simple malformed knockout</div>
In this simple example it is easy to see what the issue is, but in a much larger html block it is much harder to spot the error. I eventually resorted to have html comments for the end of each knockout binding for example <!-- end isGuestCheckout() --> which seems inefficient.
Is anyone aware of a way of validating that knockout data-binds are nested correctly?
I've run into similar issues and what I've done to troubleshoot in those cases is add a "whoami" observable for each nested KO-observable object and drop a simple span in the various nested levels to give me some insight as to what is being bound and where.
For example, if I have a view model like this...
var myViewModel = function() {
var self = this;
self.whoami = ko.observable("I am the root view model");
self.items = ko.observableArray(); //This holds an array of myItem
};
var myItem = function() {
var self = this;
self.whoami = ko.observable("I am an item");
}
Then my HTML looks something like this...
<div>
<!-- At this level I expect to see the whoami from the root VM -->
<span data-bind="text: whoami"/>
<div data-bind="foreach: listOfItems">
<!-- At this level I expect to see the whoami from the item -->
<span data-bind="text: whoami"/>
</div>
</div>
Doing this has helped me quickly discover Knockout nesting issues. Once I find it then I just pull out the whoami span tags, but I usually end up keeping the whoami observable in the JS in case I need it again.
I hope this helps! :-)
I am learning AngularJS at the moment and I am a little confused about the MVC separation of code throughout the DOM/file structure when using AngularJS.
I learn best when I work on a project. Right now I am working on a simple counter that adds a whole number when a button is pushed. I only have one way working and I am thinking of a better way to do this.
Right now I have this working in the code I am working on from AngularJS documentation itself.
I am probably crazy thinking that this cannot be the best way to do this. From my understanding ng-click is a directive that triggers a specific scope of code within the controller.
Why is Increment code inline within the DOM? As a MVC, should the code be organized to not be all over the place, such as in the main controller.js? I have tried to put the increment += function in a counter object, but could not get it to work, see jsFiddle.
<div ng-controller="MyCtrl">
<button ng-click="char">Charged</button>
<span>Total: {{ count }}</span>
</div>
I get that Apps view information based on expressions, filters, and directives. Directives bind to HTML to change behavior of the HTML. Clicks (with Directive selectors) controllers triggers AngularJS to run functions to update data without the entire page being reloaded.
So the Model is the whole setup.
The View is the expressions, filters, and directives.
Controller is the JS file of code that has objects and functions needed for the HTML Directives.
The example of the documentation has inline controller in the directive ng-click within the button tag…
Does anyone have any advice? Thank you.:)
There is a correct way of doing that in angular via a controller:
http://jsfiddle.net/zhxztysy/1/
Your fiddle was like this
<div ng-controller="MyCtrl">
<button ng-click="char">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.count = Function (char) {
$scope.count += char;
};}
Changed to this
<div ng-controller="MyCtrl">
<button ng-click="charge(5)">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.charge = function (char) {
$scope.count += char;
};
}
Can also extended like this
<div ng-controller="MyCtrl">
<button ng-click="charge()">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.chargingCount = 5;
$scope.charge = function () {
$scope.count += $scope.chargingCount;
};
}
I edited your jsfiddle to work. You have made a syntax error (bound $scope.count to a function and tried to add numbers to it later on)
Is there a way to pass a value from a Django view to an AngularJS inserted template?
In my view.py I have the code:
count_users = Profile.objects.filter(user_id__gte = 0).count()
context_dict = {'users': count_users}
return render_to_response('dashboard.html', context_dict)
In dashboard.html I am able to insert the user count into the html as follows:
{{ users }}
This works fine but dashboard.html uses AngularJS to insert some more html as follows:
<div ui-view class="fade-in-up">
</div>
Mt problem that the html file inserted by AngularJS does not respond to the:
{{ users }}
Is there a way to pass the value of users through to the AngularJS inserted HTML?
using ng-init you can attach your value into the $scope
<div ui-view class="fade-in-up" ng-init="User='{{user}}' " >
</div>
In your javascript do:
mainModule
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
});
This way, if you want to bind an angular variable in the html, you use:
{$ variable $}
If you want to add a Django variable, you use:
{{ variable }}
And your code may work if you leave it as it is, and just add this configuration to the angular module.