ng-repeat 角度数组对象答案

【问题标题】：ng-repeat angular array objectsng-repeat 角度数组对象
【发布时间】：2016-03-28 21:25:29
【问题描述】：

我有问题。我需要显示我正在使用的服务返回的信息。

服务返回我：

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

现在在“resultado”中返回一个包含两个数组的对象。

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

我需要在下一个列表中使用 ng-repeat：

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

但是，我不知道该怎么做。

已经声明了控制器，现在我需要知道如何使用“X”数组来捕获对象，该数组用于为我带来和 ng-repeat for iterarlos

我只需要一个例子来告诉我这个想法，然后我将它应用到我的控制器上。非常感谢。

【问题讨论】：

ng-repeat="person in obj.resultado" - 然后通过{{person.nombre}} 等访问属性。

标签： javascript angularjs json angularjs-ng-repeat frontend

【解决方案1】：

像这样？ - 我不知道你想在哪里显示字段值，但你可以把它们放在双花括号中：

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

【讨论】：

【解决方案2】：

要实现您想要做的事情，只需执行以下操作：

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

为了让这个更精彩，添加一个过滤器ng-repeat="person in obj.resultado | filter: textoBusqueda"。

然后只需添加另一个输入字段<input placeholder="Busqueda" ng-model="textoBusqueda"></input>

【讨论】：