Recover value of field in ng-repeat - angularjs

Sorry for the english, i'm french student :(
I would like create a comment system with AngularJS for a project.
I would like recover a value of an object who is in ng-repeat loop.
JSON : https://drive.google.com/file/d/0Bzj557dnogzOd0ZUMnZ1cWZLSFU/edit?usp=sharing
HTML :
<section ng-controller='AnnouncesCtrl' ng-show='!showActions' ng-swipe-left='showActions=true'>
<header class='header'>
<span class="return"><a href='#newAnnounce'>8</span>
</header>
<div class='loader' ng-show='loader'></div>
<section class='panel'>
<div ng-repeat='a in dept.announce' class='announces'>
<span class='title'>{{a.name}}</span>
<br/>
<span class="date">{{a.date}}</span>
<hr>
<span class="msg">{{a.desc}}</span>
<hr>
<div class="showrep" ng-click="show=true" ng-show='!show'>Montrer les réponses</div>
<div class="allrep" ng-show="show" ng-repeat='answer in a.answers'>{{answer}}<br/></div>
<div class="formrep">
<form ng-submit='addComments()'>
<input type='text' placeholder='Écrire une réponse'><input type='submit' ng-click='a.btn={{a.id}}' value='Répondre'>
</form>
</div>
</div>
</section>
JS :
function AnnouncesCtrl($scope,$http,$rootScope,$location){
$scope.getInfos=function(){
var dept="http://agence-pandor.fr/getAnnounces/index.php";
$scope.loader=true;
$http.get(dept)
.success(deptSuccess)
.error(function(){
$scope.loader=false;
alert('Impossible de récupérer le numéro étudiant. Veuillez vous reconnecter');
$location.url("/connexion"); // On redirige
})
}
deptSuccess=function(response){
$scope.loader=false;
$scope.dept=response;
}
$scope.getInfos();
$scope.addComments=function(){
alert($scope.dept.announce.btn);
}
}
Screenshot :
https://drive.google.com/file/d/0Bzj557dnogzOUDlfNWR3eEthQzA/edit?usp=sharing

I don't quite understand what your project is about (I don't know French). You are iterating over the array "announce" which is supposedly a property of "dept". When you type:
ng-repeat = 'a in dept.announce'
you are creating a temporary variable "a" in the scope that is meant for ng-repeat (like counter variable in a for loop).
If "btn" is supposed to be a unique value, then use:
ng-click = "btn = a.id"
or if "btn" is specific to each value of "a in announce", use:
ng-click = "btn[$index] = a.id";
You can get the value of btn in your JS file by using $scope.btn

Related

Why The angularjs filter's named filter don't work with the first element?

Im a new in angular. I added a filter to an list to try to show only values that match my filter text. It work fine, except with the first todo.title.
if I have todos: e, f, g, gf : typing e did not change anything, but typing f will show f and gf. that is always look like this for the first todo in my list.
Do you know why?
in my html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="Que devez-vous faire ?" ng-model="newTodo" />
<button class="btn btn-info" ng-click="addTodo()">Ajouter la tâche</button>
</form>
<article ng-show="todos.length">
<p><strong><u>Les tâches en cours</u> :</strong></p>
<p><strong><u>Recherche</u> : </strong><input type="text" ng-model="test"></p>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter : test | orderBy:'title'" ng-class="{completed: todo.completed}">
<div class="view">
<span>{{todo.title}}</span>
<span class="close" ng-click="removeTodo(todo)">x</span>
</div>
</li>
</ul>
</article>
when I put a in the input, c, d and other must disappear. But not here.
I belive the filter will search the string in all the properties of your todo. If, for example, you are trying to filter by the title, you should use something like this
<li ng-repeat="todo in todos | filter:{title: test || ''} | orderBy:'title'" ng-class="{completed: todo.completed}">
If you don't add || '' to the filter, the todos won't show up when the page is loaded. Hope it helps, cheers.
Documentation for the filter: https://docs.angularjs.org/api/ng/filter/filter

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 {{}}

inject image in between every ng-repeat using angularjs

I am working in angularjs application, i have used ng-repeat in my application but i need to insert images in between every ng-repeat loop dynamically.
Is it possible to inject image inbetween every ng-repeat.
sample xml file
`<?xml version='1.0' encoding='UTF-8' ?>
<revista>
<notas>
<banner>No</banner>
<bannerFuente></bannerFuente>
<bannerURL></bannerURL>
<copete>Editorial</copete>
<titulo>Se armó en grande</titulo>
<seccion>Opinión</seccion>
</notas>
<notas>
<banner>No</banner>
<bannerFuente></bannerFuente>
<bannerURL></bannerURL>
<copete>Perfiles de clientes</copete>
<titulo>¿Quién se llevó mi negocio?</titulo>
<seccion>Opinión</seccion>
</notas>
<notas>
<banner>No</banner>
<bannerFuente></bannerFuente>
<bannerURL></bannerURL>
<copete>Gestión empresarial</copete>
<titulo>Gestión para pequeños negocios</titulo>
<seccion>Opinión</seccion>
</notas>
</revista>`
js file
$http.get('sample.xml').then(function(response)
{
var dom = response.data;
$scope.posts = dom.revista.notas;
})
html file with ng-repeat and swiper
<div class="swiper-container" ng-controller='MainCtrl'>
<div class="swiper-wrapper">
<div class="swiper-slide" ng-repeat="key in posts">
<div class="mag_content_wrap con_style1">
<div class="cls_favorite_sec editorial_page1">
<h2>{{key.seccion}}</h2>
</div>
<div class="cls_favorite_sec editorial_page">
<div class="cls_inner1 img_r">
<p class="img_con">
<img src="Imagenes/{{key.imagen}}" />
</p>
</div>
<div class="cls_inner2 editorial_page2">
<h2>{{key.copete}}</h2>
<h3>{{key.titulo}}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
In the above code ng-repeat shows three pages properly, but i need to load image inbetween every page after swipe. If i swipe first content it should shows image and if i swipe image it shows second content and vice versa.

Get value of SPAN - Selenium-WebDriver

I want to get the value of SPAN using Selenium-WebDriver. The value that I want get is this: 00000632/14
My code HTML is this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div>
<div>
<h3 class="subTitulo"></h3>
</div>
<div style="margin-top: 20px;">
<strong>
Tu número de contacto es:
</strong>
<span>
**00000632/14**
</span>
</div>
Is there any method in Selenium-Webdriver to get "00000632/14" ? Thanks in advance.
Agustin
If this is the only <span> element in the HTML document, then you can simply use:
String text = driver.findElement(By.tagName("span")).getText();
If you have several <span> elements, and you want to get the text from all of them, then you can use:
List<WebElement> spans = driver.findElements(By.tagName("span"));
for (WebElement span : spans)
{
String text = span.getText();
...
}
The following will work,
String text = driver.findElement(By.cssSelector(".span9 > div > div > span")).getText();

Angular ng-switch with boolean

I want to check boolean data with angular ng-switch
this is my code. but it is not working
<div ng-switch={{Item.ItemDetails.IsNew}}>
<div ng-switch-when="true">
<p class="new fontsize9 fontWeightBold">NEW</p>
</div>
</div>
<div ng-switch={{Item.ItemDetails.IsFeatured}}>
<div ng-switch-when="true">
<div class="featured">
<p class="fontWeightBold fontsize8">featured</p>
</div>
</div>
</div>
values of {{Item.ItemDetails.IsNew}} and {{Item.ItemDetails.IsFeatured}} are true or false
Convert the boolean to a string:
<div ng-switch="Item.ItemDetails.IsNew.toString()">
<div ng-switch-when="true">
If you are just checking for true values, ng-if seems more appropriate and reduces the need for additional divs containing the code, reducing your sample too:
<div ng-if="Item.ItemDetails.IsNew">
<p class="new fontsize9 fontWeightBold">NEW</p>
</div>
<div class="featured" ng-if="Item.ItemDetails.IsFeatured">
<p class="fontWeightBold fontsize8">featured</p>
</div>
Full docs at: http://docs.angularjs.org/api/ng.directive:ngIf
This syntax works for me:
<div ng-switch="Item.ItemDetails.IsFeatured">
<div ng-switch-when="true">FEATURED ITEM HTML</div>
<div ng-switch-default>REGULAR ITEM HTML (not featured)</div>
</div>
You should remove the {{}} from the ng-switch:
Change this <div ng-switch={{Item.ItemDetails.IsNew}}>
to <div ng-switch=Item.ItemDetails.IsNew>
The attribute value of ng-switch are interpreted as literal string values to match against. (Meaning that cannot be expressions.) For example, ng-switch-when="someVal" will match against the string "someVal" not against the value of the expression $scope.someVal.
If you really have to use ng-switch, it can be forced to semi-use evaluative expressions by the workaround of the .toString() javascript method. Example, using the scope variables numeric 'lastSortIndex' and the boolean 'reverseSorted', plus the AngularJS HTML variable '$index':
<div ng-switch="((lastSortIndex === $index).toString()+(reverseSorted).toString())">
<div ng-switch-when="truetrue">
<span class="glyphicon glyphicon-chevron-up">{{ header }}</span>
</div>
<div ng-switch-when="truefalse">
<span class="glyphicon glyphicon-chevron-down">{{ header }}</span>
</div>
<div ng-switch-default>{{header}}</div>
</div>
Note the above example is concatenating the booleans together and then evaluating their string contents. Would be better to move this into a callable function that returns a string to be evaluated in the switch-case.
Though I would recommend if possible for you to keep the logic in the logic-controllers area of the code (the javascript files). You can use the ng-html-safe AngularJS directive in combination with their Sanitize feature to call a function in Javascript that switches and returns desired snippets of HTML code for you. Example:
index.html:
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.3.13/angular-sanitize.js">
</head>
<body ng-controller="MainController">
<!-- add your other code, like a table code here -->
<div ng-bind-html="HeaderSortIcon(lastSortIndex, $index, reverseSorted, header)">
</div>
</body>
script.js:
var myApp = angular.module('myApp ', ['ngSanitize']);
$scope.HeaderSortIcon = function (lastSortIndex, $index, reverseSorted, header) {
if (lastSortIndex === $index) {
if( reverseSorted )
{
return '<div><span class="glyphicon glyphicon-chevron-up"></span>' + header + '</div>';
}
else{
return '<div><span class="glyphicon glyphicon-chevron-down"></span>' + header + '</div>';
}
}
else {
return header;
}
}

Resources