ng-repeat angular 数组对象
ng-repeat angular array objects
我有问题。
我需要显示我正在使用的服务返回的信息。
客服returns我:
Object {resultado:array[2], mensaje: "4 personas `necesita tu ayuda"}
现在 "resultado" returns 我有一个有两个数组的对象。
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">,000</span><br>
<div class="btn-ok icon-confirmation"></div>
<div class="btn-cancel icon-confirmation"></div>
</div>
</li>
</ul>
</div>
但是,我不知道该怎么做。
已经声明了控制器,现在我需要知道如何使用 "X" 数组来捕获对象,并且 ng-repeat 用于 iterarlos
我只需要一个例子来说明我的想法,我把它应用到我的控制器上。
非常感谢。
像这样的? - 我不知道你想在哪里显示字段值,但你可以将它们放在双花括号中:
<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">,000</span><br>
<div class="btn-ok icon-confirmation"></div>
<div class="btn-cancel icon-confirmation"></div>
</div>
</li>
要实现您的目标,只需按照以下步骤操作:
<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">,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>
我有问题。 我需要显示我正在使用的服务返回的信息。
客服returns我:
Object {resultado:array[2], mensaje: "4 personas `necesita tu ayuda"}
现在 "resultado" returns 我有一个有两个数组的对象。
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">,000</span><br>
<div class="btn-ok icon-confirmation"></div>
<div class="btn-cancel icon-confirmation"></div>
</div>
</li>
</ul>
</div>
但是,我不知道该怎么做。
已经声明了控制器,现在我需要知道如何使用 "X" 数组来捕获对象,并且 ng-repeat 用于 iterarlos
我只需要一个例子来说明我的想法,我把它应用到我的控制器上。 非常感谢。
像这样的? - 我不知道你想在哪里显示字段值,但你可以将它们放在双花括号中:
<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">,000</span><br>
<div class="btn-ok icon-confirmation"></div>
<div class="btn-cancel icon-confirmation"></div>
</div>
</li>
要实现您的目标,只需按照以下步骤操作:
<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">,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>