browse array in angularJS - angularjs

i try to access items on my array, let me explain :
it returns me very good values when I print in my page twig
{{statistics}}
i have this result :
[{"today":[1,0],"lastmonth":[2,1],"todayWomen":[1,0],"lastmonthWomen":[2,1],"todayMen":[0,0],"lastmonthMen":[0,0],"todayUnique":[1,0],"lastmonthUnique":[1,1],"todayWomenUnique":[1,0],"lastmonthWomenUnique":[1,1],"todayMenUnique":[0,0],"lastmonthMenUnique":[0,0]}]
in my app.js
var statistics = [];
$http.get('/ajax/statistics').success(function(data){
angular.forEach(data, function(value,key){
if (value != "ok") {
statistics.push(value);
};
});
$scope.statistics = statistics
});
but when i try to access item by item with ng-repeat and $index it appears to me only the index elements 0
{% verbatim %}
{{statistics}}
<div ng-repeat="stat in statistics">
<h3>Les visites globales de l'établissement n° : {{$index}} !!</h3>
<li> Nombre de personnes qui ont visité aujourd'hui est : {{stat.today[$index]}} </li>
</div>
{% endverbatim %}
when i try with hard code it's ok
{% verbatim %}
{{statistics}}
<div ng-repeat="stat in statistics">
<h3>Les visites globales de l'établissement n° : {{1 or 0}} !!</h3>
<li> Nombre de personnes qui ont visité aujourd'hui est : {{stat.today[1 or 0]}} </li>
</div>
{% endverbatim %}
any help please

Can you provide an working example?
I tested a similar example out in plunkr, and it seems to work. Could not reproduce.
http://plnkr.co/edit/uPuD6xyVvpiSJJQUf9aS?p=preview
Using {{stat.today[$index]}}
EDIT 1:
Here is only 1 iteration, still works http://plnkr.co/edit/v81Gp5rmE3rVGQB1d1WK?p=preview
EDIT 2: Elements in array, here you go http://plnkr.co/edit/QiSoWPIzZj62E2jYdD9G?p=preview

Related

orderBy in angularjs in ng-repeat

I don't understand why it's not working do you have an idea why orderBy'-nbtickets' not working ?
<ul ng-repeat="item in customarray | orderBy:'-nbtickets' track by $index">
<li ui-sref="app.usersingle({id:item[0].id,iterate:1})" class="row organization">
<div class="col-md-2 classement text-center">{{$index+1}}</div>
<div class="name col-md-4 text-center">{{item[0].username}}</div>
<div class="col-md-2 total text-center">{{item[0].nbtickets}}</div>
<div class="col-md-2 maintenance text-center">{{item[0].tickmaintenance}}</div>
<div class="col-md-2 assistance text-center">{{item[0].tickassistance}}</div>
</li>
</ul>
in my controler i just do that:
$scope.customarray = data;
Here the array i display it by doing {{item}}(parse of my array which is preatty big)
[
{"username":"Eugenie Martin","tickassistance":4,"tickbug":0,"tickmaintenance":3,"nbtickets":7,"id":660302971,"tickets":[{"date":"2015-09-29T07:12:14Z","titre":"Changement date de clôture dossier Barbe Alain","status":"closed","tag":"maintenance"},
{"date":"2015-09-04T09:45:20Z","titre":"43325- NH DISTRIBUTION","status":"closed","tag":"assistance"},
{"date":"2015-08-20T06:18:04Z","titre":"TR: EURL NH DISTRIBUTION vous a envoyé un message depuis sa plateforme","status":"closed","tag":"assistance"},{"date":"2015-02-25T16:00:46Z","titre":"Votre demande au support sans suite","status":"closed","tag":"assistance"},
{"date":"2015-01-12T06:48:35Z","titre":"Bonjour,\n\nle cabinet AUFICOM aura un stand lors du...","status":"closed","tag":"assistance"},
{"date":"2014-12-18T09:48:38Z","titre":"ISACOMPTA","status":"closed","tag":"maintenance"},{"date":"2014-12-15T14:08:08Z","titre":"changement date de clôture","status":"closed","tag":"maintenance"}],
"monthly":[{"now11":0,"assist":0,"maint":0},
{"now10":0,"assist":0,"maint":0},
{"now9":1,"assist":1,"maint":0},
{"now8":2,"assist":1,"maint":1},
{"now7":0,"assist":0,"maint":0},
{"now6":0,"assist":0,"maint":0},
{"now5":0,"assist":0,"maint":0},
{"now4":0,"assist":0,"maint":0},
{"now3":0,"assist":0,"maint":0},
{"now2":0,"assist":0,"maint":0},
{"now1":0,"assist":0,"maint":0},
{"now":0,"assist":0,"maint":0}]},
[{"date":"2015-09-29T07:12:14Z","titre":"Changement date de clôture dossier Barbe Alain","status":"closed","tag":"maintenance","id":660302971,"name":"Eugenie Martin"},
{"date":"2015-09-04T09:45:20Z","titre":"43325- NH DISTRIBUTION","status":"closed","tag":"assistance","id":660302971,"name":"Eugenie Martin"},
{"date":"2015-08-20T06:18:04Z","titre":"TR: EURL NH DISTRIBUTION vous a envoyé un message depuis sa plateforme","status":"closed","tag":"assistance","id":660302971,"name":"Eugenie Martin"},
{"date":"2015-02-25T16:00:46Z","titre":"Votre demande au support sans suite","status":"closed","tag":"assistance","id":660302971,"name":"Eugenie Martin"},
{"date":"2015-01-12T06:48:35Z","titre":"Bonjour,\n\nle cabinet AUFICOM aura un stand lors du...","status":"closed","tag":"assistance","id":660302971,"name":"Eugenie Martin"},
{"date":"2014-12-18T09:48:38Z","titre":"ISACOMPTA","status":"closed","tag":"maintenance","id":660302971,"name":"Eugenie Martin"},
{"date":"2014-12-15T14:08:08Z","titre":"changement date de clôture","status":"closed","tag":"maintenance","id":660302971,"name":"Eugenie Martin"}]
];
Have you tried?
<ul ng-repeat="item in customarray | orderBy:'nbtickets':true track by $index">
There is a reverse option in angular orderBy which is the :true part above.
Have you tried orderBy:-item[0].nbtickets ?

ng-class expression not working with parameter coming from httpresponse

I have a servlet that returns a JSON object with a parameter named "valoracion" and I want to use it for a span label to be a css class with the name of the value associated to that parameter. This I want to do it to show a .gif in a different way depending on this class. I'm using AngularJS, btw.
This is the js code from the "novedades" page controller:
angular.module('myApp')
.controller('novedadesCtrl', [ '$scope','auth', 'novedadesService', function($scope,auth,novedadesService){
$scope.mostrar = ["Comentarios","Valoraciones"];
$scope.novedades = "Comentarios";
$scope.novedadesComentarios;
$scope.novedadesValoraciones;
$scope.cogerNovedades = function(){
debugger;
novedadesService.novedades( auth.idUser(), function(comentarios,valoraciones) {
$scope.novedadesComentarios = comentarios;
console.log(valoraciones);
$scope.novedadesValoraciones = valoraciones;
});
};
$scope.cogerNovedades();
}]);
novedadesService.novedades is a factory that sends a POST request to the servlet and returns the same JSON returned by the servlet. This is an example of the aforementioned JSON:
idJuego: 0
idUsuario: 500
juego: "Star Wars: The Old Republic"
nombreApellidos: "Gregorio de Miguel"
nombreUsuario: "Goyo"
valoracion: "cuatroEstrella"
This other one is the html code for that page:
<div class="container" id="cuerpo">
<h1 class="theme-color-text font">Novedades</h1>
<div class="row form-inline">
<div class="form-group" style="float: right;">
<label for="mostrar">Mostrar: </label>
<select id="mostrar" class="form-control" ng-model="novedades"
ng-options="x for x in mostrar">
</select>
</div>
</div>
<!-- lista de novedades de comentarios -->
<div ng-if="novedades == 'Comentarios'" class="row">
<ul class="list-group" id="novedades">
<li class="list-group-item" ng-repeat="comentario in novedadesComentarios">
{{comentario.nombreUsuario}}
({{comentario.nombreApellidos}}) ha comentado el juego
{{comentario.juego}}</li>
</ul>
</div>
<!-- lista de novedades de valoraciones -->
<div ng-if="novedades == 'Valoraciones'" class="row">
<ul class="list-group" id="novedades">
<li class="list-group-item" ng-repeat="valoracion in novedadesComentarios">
{{valoracion.nombreUsuario}}
({{valoracion.nombreApellidos}}) ha valorado el juego
{{valoracion.juego}}
con <span ng-class="{{valoracion.valoracion}}"></span></li>
</ul>
</div>
This is the part where I have the problem:
<span ng-class="{{valoracion.valoracion}}"></span>
The following is an example from the css we want the page to show:
.cuatroEstrella{
display: inline-block;
margin-bottom: -10px;
width: 100px;
height: 30px;
background: url("../img/valoracion.gif") 0 -262px;
}
Here you have a screenshot from the page. You can see the problem in the developers console.
I appreciate any help you can provide on this issue.
Don't need to use the {{}}, just like this :
<span ng-class="valoracion.valoracion"></span>
Bad copy/paste ;). You are iterating through 'novedadesComentarios' instead through 'novedadesValoraciones'. You are doing this:
<li class="list-group-item" ng-repeat="valoracion in novedadesComentarios">
{{valoracion.nombreUsuario}}
({{valoracion.nombreApellidos}}) ha valorado el juego
{{valoracion.juego}}
con <span ng-class="{{valoracion.valoracion}}"></span>
</li>
And I think you want to do this:
<li class="list-group-item" ng-repeat="valoracion in novedadesValoraciones">
{{valoracion.nombreUsuario}}
({{valoracion.nombreApellidos}}) ha valorado el juego
{{valoracion.juego}}
con <span ng-class="valoracion.valoracion"></span>
</li>
Update
I had forgotten to say that you still have to do what #Mike Vranckx said and remove the {{}}

Jekyll — Loop through posts with title and number

I'm building a simple blog using Jekyll. I'm looping through all of my posts which works a treat. However, I'd like to add a number marker to each post. For example the first post would be marked with a 1, second with a 2... and so on.
My current loop likes like this:
<ol class="post-list">
{% for post in site.posts %}
<li class="post-item">
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
<div class="post-info">
<p>Post #1</p>
<h2>{{ post.title }}</h2>
</div>
</a>
</li>
{% endfor %}
</ol>
I understand I need to add a count to this loop but I'm unsure how.
Adding the following to my loop seems to make sense:
{% for num in (1...n) %}
But I'm not sure how to use this with my existing loop.
Any help would be gratefully received.
In each liquid loop you have a counter out of the box : forloop
Change : <p>Post #1</p> for : <p>Post #{{ forloop.index }}</p>
Documentation here.
If you don't need to count them automatically you can simple add the variable to your posts:
---
number: 1
---
Than call it via
{{ post.number }}

Angular, Django undefined value from Django

I have a get_context_data in my view
def get_context_data(self, **kwargs):
context = super(MyView,self).get_context_data(**kwargs)
humans = Human.objects.all()
context['humans'] = [{'fname': i.first_name, 'lname':i.last_name} for i in humans]
return context
When I have this:
{% for human in humans %}
<tr>
<td>{{human.fname}} {{human.lname}}</td>
</tr>
{% endfor %}
It works fine. I get
John Doe
Michael Smith
etc...
but, when I've tried put this values to angulary by:
{%verbatim%}
...
<button ng-controller="MyCtrl" type="submit" ng-click="
{%endverbatim%}
myFunc({{human.fname}},{{human.lname}})
{%verbatim%}">
Send
</button>
...
{%endverbatim%}
I've got only undefined:
#in my controller:
#...
$scope.myFunc = function(fname, lname){
$log.log(fname, lname); // <- this returns 2x undefined
}
Guys, any ideas?
The Django verbatim looks like this:
{% verbatim %}
{{if dying}}Still alive.{{/if}}
{% endverbatim %}
https://docs.djangoproject.com/en/1.8/ref/templates/builtins/#verbatim
You have the {% endverbatim %} tag before {% verbatim %} in your snippet.
<button ng-controller="MyCtrl" type="submit" ng-click="
{%endverbatim%}
myFunc({{human.fname}},{{human.lname}})
{%verbatim%}">
Send
</button>
I've solved it
myFunc("{{human.fname}}","{{human.lname}}")
instead
myFunc({{human.fname}},{{human.lname}})

angular-google-maps - How to use ng-repeat directive in ui-gmap-window tag?

I need to use a ng-repeat directive into an ui-gmap-window item but it does not work.
<ui-gmap-google-map center="search.map.center" zoom="search.map.zoom" draggable="true" >
<ui-gmap-marker ng-repeat="position in search.positions" idKey="position.name" coords='position.coords' options="title='{{position.name}}'" >
<ui-gmap-window ng-show="position.show" onclick="position.show = !position.show" closeClick="'closeClick'" ng-cloak isIconVisibleOnClick='true' >
<div ng-controller="InfoWindowInMarkerController">
<h4>{{position.name}}</h4>
<div ng-if="! position.isGroup">
<!-- code that display the information of a unique member -->
</div>
<div ng-else>
<p>{{position.isGroup ? "Veuillez voir ci-dessous les personnes associées en utilisant les filtres de recherche pour limiter à la ville souhaitée" : ""}}</p>
<!-- below the ng-repeat that didn't work -->
<div ng-repeat="p in position.persons">{{p}}</div>
<br><br><br><br>
<br>
</div>
</div>
</ui-gmap-window>
<!--<marker-label content="position.name" anchor="22 0" class="marker-labels"/>-->
</ui-gmap-marker>
Could you please tell me how to do ?
Please find below a link to the plunker that illustrate my problem :
http://plnkr.co/edit/EinFCPEsdhS94ssPHEF2?p=preview
Thanks in advance.

Resources