CODEWITHSUNDEEP
javascriptangularjsjsonangularjs-ng-repeatfrontend
Miguel Angel Gonzalez Pinto
Miguel Angel Gonzalez Pinto

Reputation: 161

ng-repeat angular array objects

I have a problem. I need to show the information returned by a service that I am using.

Service returns me:

Object {resultado:array[2], mensaje: "4 personas `necesita tu ayuda"}

Now in "resultado" returns me a object with two arrays.

resultado
object 0 {id_persona : 1, nombre: Miguel, apellido: Gonzalez.....}
object 1 {id_persona : 1, nombre: Miguel, apellido: Gonzalez.....}

I need to use ng-repeat in the next list:

<div id="request-uptutor" class="background-uptutor">
<div id="header-home"></div>
<div id="home-alert">
    <h4 class="type-text-list5 type-font3 type-text-color5-titulos">{{dataRequest.mensaje}}</h4>
</div>
<h5 class="type-font3 type-text-list5 type-text-color6" style="margin-left:20px;">Tutorías solicitadas</h4>
<div class="lists list-image">
    <ul>
        <li ng-repeat="">
            <img src="assets/img/images.jpg" class="img-circle list-blocks">
            <div class="information-class list-blocks">
                <span class="type-text-list1">Mateo Martinez</span><br>
                <span class="type-text-list2 type-text-color5-titulos">Universidad ICESI</span><br>
                <span class="type-text-list3 type-text-color2">16 de diciembre de 2015 | 13:00-15:00 Grupal(4 personas)</span>
            </div>
            <div class="datatime-class list-blocks" style="float:right !important;">
                <span class="type-text-list5 type-font3 type-text-color5-titulos">$30,000</span><br>
                <div class="btn-ok icon-confirmation"></div>
                <div class="btn-cancel icon-confirmation"></div>
            </div>
        </li>
    </ul>
</div>

But, I do not know how to do it.

have already declared the controller, now I need to know how to capture the object with the "X" arrays used to bring me and ng-repeat for iterarlos

I just need an example to me the idea, and I applied it to my controller. I thank you very much.

Upvotes: 1

Views: 103

Answers (2)

Felipe Alarcon
Felipe Alarcon

Reputation: 956

To achieve what you're trying to do simply do as follow:

<div id="request-uptutor" class="background-uptutor">
<div id="header-home"></div>
<div id="home-alert">
    <h4 class="type-text-list5 type-font3 type-text-color5-titulos">{{dataRequest.mensaje}}</h4>
</div>
<h5 class="type-font3 type-text-list5 type-text-color6" style="margin-left:20px;">Tutorías solicitadas</h4>
<div class="lists list-image">
    <ul>
        <li ng-repeat="person in obj.resultado">
            <img src="assets/img/images.jpg" class="img-circle list-blocks">
            <div class="information-class list-blocks">
                <span class="type-text-list1">{{person.nombre}}{{person.apellido}}</span><br>
                <span class="type-text-list2 type-text-color5-titulos">{{person.universidad}}</span><br>
                <span class="type-text-list3 type-text-color2">16 de diciembre de 2015 | 13:00-15:00 Grupal(4 personas)</span>
            </div>
            <div class="datatime-class list-blocks" style="float:right !important;">
                <span class="type-text-list5 type-font3 type-text-color5-titulos">$30,000</span><br>
                <div class="btn-ok icon-confirmation"></div>
                <div class="btn-cancel icon-confirmation"></div>
            </div>
        </li>
    </ul>
</div>

To make this even fancier, add a filter ng-repeat="person in obj.resultado | filter: textoBusqueda".

Then just add another input field <input placeholder="Busqueda" ng-model="textoBusqueda"></input>

Upvotes: 0

TonyW
TonyW

Reputation: 18875

something like this? - I have no idea where you want to show the field values, but you can put them in the double curly braces:

<li ng-repeat="result in obj.resultado">
    <img src="assets/img/images.jpg" class="img-circle list-blocks">
        <div class="information-class list-blocks">
            <span class="type-text-list1">{{result.nombre}}</span><br>
            <span class="type-text-list2 type-text-color5-titulos">Universidad ICESI</span><br>
            <span class="type-text-list3 type-text-color2">16 de diciembre de 2015 | 13:00-15:00 Grupal(4 personas)</span>
        </div>
        <div class="datatime-class list-blocks" style="float:right !important;">
            <span class="type-text-list5 type-font3 type-text-color5-titulos">$30,000</span><br>
            <div class="btn-ok icon-confirmation"></div>
            <div class="btn-cancel icon-confirmation"></div>
        </div>
</li>

Upvotes: 1

Related Questions