I'm new to AngularJS but I love the framework.
What I have right now, is a (stub) single page that loads json data.
JS
var merlinoApp = angular.module('merlino', []);
merlinoApp.controller('mainController', function ($scope, $http) {
...
$http.get('#Url.Action( "consoledatapull", "ConsoleElaborazioni")')
.then(function (res) {
$scope.jobs = res.data.jsonjobs;
$scope.clienti = res.data.jsonclienti;
$scope.console = res.data.jsonconsole;
});
...
});
HTML
<div ng-repeat="roll in jobs | orderBy:sortType:sortReverse | filter:searchJob | filter:searchCliente | filter:searchStato" class="console-row my-row">
...
<div class="console-cell-id console-cell console-cell-padding console-cell-no-border-sx">{{ roll.id }}</div>
...
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell-esito-selected' : collapsed}" class="console-cell-esito console-cell console-cell-no-border-sx">SHORT DESC</div>
<div ng-show="collapsed" class="console-cell-esito-long console-cell console-cell-no-border-sx">{{ roll.esito }}</divng-show></div>
</div>
This populates ng-repeat, and the ng-click shows/hides the `ng-show div.
So far so good(?).
What Ì'm trying to achieve, is to load json data into
<div ng-show="collapsed" class="console-cell-esito-long...
if
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell...
is clicked.
That is each div of ng-repeat, can be loaded with specific data:
<ul>
<li ng-repeat="logelem in jsonlog">
{{ logelem.log }}
</li>
</ul>
I thought about using a function:
<div ng-click="function(id)...
and then load json into a div identified by an id, so i used $index...
The result was, being able to load same data into all divs at once :/
Help would be appreciated.
My suggestion woudl be to add the information to the jobs elements itself.
So for example, the ng-click would become:
<div ng-click="loadData(id, roll)">CLICK ME</div>
and then the loadData would be something like:
$scope.loadData = function(id, roll){
// Do something
roll.result = result;
}
and then you can use the result from that object in the view like you would do in other places. You can then for example hide the object where you want the final result until the variable result is defined.
I think this will be the easiest solution.
Update from comments
Why not change the collapsed value in the method? Or you could use a $watch to listen to changes on the collapsed variable.
Related
I am working on an app in angular and in an html file i have something like this
<div *ngFor="let var of list">
<div>
{{newVar.name}}
<div>
</div>
My problem is that i dont know how to declare newVar properly in the div because i want newVar to be a result returned from a function in the component that takes the first var as parameter
so i basically want something like
newVar=func(var)
before using the name attribute and i dont know how to do this
I could do func(var).name but i dont only display the name so i dont want to call the function multiple times
So your workaround is something like , streaming list in html and passing var to typescript function func(var) storing result in newVar. From there you want to display name value in UI . Is my understanding is correct , my suggestion is
ts
newVar = [];
///
func() {
list.forEach(element=>{
newVar.push(element);
});
}
html
<div *ngFor="let var of newVar">
<div>
{{var.name}}
<div>
</div>
Currently there aren't any direct solution for this. One workaround is to use *ngFor as a hack (and the cost is performance)
<div *ngFor="let _var of list">
<div *ngFor="let newVar of [func(_var)]">
{{newVar.name}}
</div>
</div>
you has severals options:
<div *ngFor="let var of list">
{{func(var).name}}
</div>
Use an auxiliar array
//in your .ts
auxArray:any[]=[];
this.auxArray=this.list.map(x=>this.func(x))
//and iterate over auxArray
<div *ngFor="let var of auxArray">
{{var.name}}
</div>
//or iterate over list and use "index"
<div *ngFor="let var of list;let i=index">
{{var}} = {{auxArray[i].name}}
</div>
If your list is an array of object you can also
//in your .ts
this.list.forEach(x=>{
data:this.func(x)
}
//and iterate over list but use data.name
<div *ngFor="let var of list">
{{var.data.name}}
</div>
The first option has a poor efficency because Angular execute the function several times -each time check the application, you can see if use a console.log(var) in your function
You can pass variables to newvar function like this.
<div *ngFor="let var of list">
<div> {{newVar(var)}} <div>
</div>
i have found a solution,basically you can do something like
<div *ngIf="func(var) as newVar">
{{newVar.name}}
</div>
I get string data from my database to my variable, I want to display them as HTML tags by [innerHTML], but it doesn't work.
The variable is displayed on string instead HTML Tags.
I tried to use with DomSanitizer but it don't work:
article:Article[];
(article.articlesTitleHtml:SafeHtml;)
in the function:
this.article.forEach(elementArticle => {
elementArticle.articlesTitleHtml = this.sanitizer.bypassSecurityTrustHtml(elementArticle.articleTitle)
});
in HTML page:
<div *ngFor="let item of articles">
<div id="{{item.articleId}}">
<h2 class="chart" [innerHTML]="item.articlesTitleHtml"></h2>
</div>
my code:
in Type Script:
articles:Article[];
ngOnInit() {
this.apiArticle.getArticleList().subscribe(data=>{
this.articles=data
})
in HTML page:
<div *ngFor="let item of articles">
<div id="{{item.articleId}}">
<h2 class="chart" [innerHTML]="item.articleTitle"></h2>
</div>
</div>
It should work, you can check here...
if you can share the type of data that you're dealing with, it will give more insight into the appropriate DomSanitizer method which should be called
in my example above, i used both bypassSecurityTrustHtml & bypassSecurityTrustUrl for the 2 different types of strings which needed sanitization
I have an issue that I don't understand, and if anyone can help, I would appreciate it.
I am using Ionic2 with Meteor/MongoDb.
I have a cursor:
private messages: Mongo.Cursor<Message>;
On the server I do an insert:
Messages.insert({
chatId: chatId,
senderId: senderId,
content: content,
readByReceiver: false,
createdAt: new Date()
});
It triggers an observable as expected:
this.messages.observe({
added: (message) => this.addMessageToLocal(message)
});
private addMessageToLocal(newMessage: Message): void {
// here I print the message, and it is as expected
}
Also, I do a forEach through the messages, and they are all populated as expected.
Issue
My problem is in the html. I loop trough the messages cursor. It displays each item as expected. Until I add a message (as above). Then the new message from the html is undefined.
<template ngFor let-message [ngForOf]="messages">
<div *ngIf="!exists(message)" class="message-wrapper">
<div *ngIf="message.changeDate">
<center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
</div>
<div [class]="'message message-' + message.ownership">
<div class="message-content">server:{{message.content}}</div>
<span class="time-tick">
<span *ngIf="message" class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="message && message.readByReceiver && senderId == message.senderId">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>
</div>
</div>
</template>
The final message item in the loop (the new one added), is undefined. i.e. In the *ngIf="!exists(message)" function called from the html, I print the message, and its's undefined.
So in the html I loop over the messages Cursor, and the new one is undefined. However, if even in the same function (exists()), I loop over the messages Cursor again, just to test it, none of the items are undefined.
Question
Please can anyone suggest what I can do to not have the last item in the Cursor as undefined?
Thanks
UPDATE
I am getting something I don't understand.
When I call a function from the html as follows, message is not undefined:
{{ formatMessage(message) }}
But if I call a function as follows, it is undefined:
*ngIf="!exists(message)"
I solved this by using:
changeDetection: ChangeDetectionStrategy.OnPush,
But I still think there may be a bug in Angular
i am trying (still learning) to get the value of an NG-Repeat expression outside the NG-Repeat and use it as a value inside a class. This is the NG-Repeat section (i simplified it):
The Classiccds is the array i get from the JSON and the colorcode is a colomn inside, each cd has a different color code.
<div ng-repeat="cd in cds = (classiccds | limitTo:1)">
<div>{{cd.colorcode;}}</div>
</div>
RESULT: #ffffff
The above works fine, it returns me the colorcode of the first cd in the array
but i also would like to use it somewhere else, outside of the array, on the page background (since it returns only one row) as such.
<div style="background-color:{{cd.colorcode}}>
<div ng-repeat="cd in cds = (classiccds | limitTo:1)">
<div>{{cd.colorcode;}}</div>
</div>
</div>
You can simply set this item to your scope in controller, like:
$scope.cd = classiccds[0];
and get away with the ng-repeat itself:
<div style="background-color:{{cd.colorcode}}">
<div>
<div>{{cd.colorcode;}}</div>
</div>
</div>
or you can do:
<div style="background-color:{{(classiccds | limitTo:1)[0].colorcode}}">
<div ng-repeat="cd in cds = (classiccds | limitTo:1)">
<div>{{cd.colorcode;}}</div>
</div>
</div>
If the first value in the array is particularly useful for you, I suggest that you store it in a separate variable on the scope, so you can reuse it easily from multiple locations. Something like this:
function yourCtrl($scope) {
$scope.cds = //Your array
$scope.interestingColor = $scope.cds[0].colorcode
}
Then you can use it in your html like this:
<div style="background-color:{{interestingColor}}>
<div ng-repeat="cd in cds = (classiccds | limitTo:1)">
<div>{{cd.colorcode;}}</div>
</div>
</div>
I would like to iterate over a Mongo query for the user's collections using the each block.
I have the following html template that should load in different pieces of data from the profile object in the users collection.
To clarify, the users Collection has a services, status and profile object
{{#each profile}}
<div class="profileUser oneDiv">
<div class="profileUserLeft">
<div class="profileUserImage">
<div class="spin"> {{> spinner}} </div>
<img src="{{profile.picturelrg}}" class="profileUserImg">
</div>
<div class="profileUserGraph">
<label for="myChart"><b>Meetup Graph</b>
<br>
<span class="profileMonth"> {{profile.month}} </span>
<br>
<canvas id="myChart"></canvas>
</label>
</div>
</div>
<div class="profileUserRight">
<div class="profileUserName">
<ul>
<li><h1>{{profile.name}}</h1></li>
<li>
<div class="circle" style="background-color: {{online.color}}"></div>
</li>
</ul>
</div>
</div>
</div>
{{/each}}
Here is my helper that sets the query
profile: function() {
return Meteor.users.find({
_id: id
});
}
Currently the page loads in no data.
When I statically query for a property however it works. This is done like so.
profimg: function() {
return Meteor.users.find({
_id: id
}).fetch()[0].profile.picturelrg;
}
How can I be more efficient and use the each block instead of statically searching for each different property utilizing the fetch() method?
each of Blaze takes an array as parameter to loop while find method return a Cursor of MongoDB. What you need to do is fetch the Cursor to return the array
profile: function() {
return Meteor.users.find({
_id: id
}).fetch();
}
However, your logic is not correct. You are finding the profile that matches with the input id, thus the function should be
profile: function() {
return Meteor.users.findOne({
_id: id
});
}
and then you can access the property without the each loop