Stack Overflow em Português Asked by guickz on November 25, 2021
Eu to usando o sistema de chips do Angular JS e to com um problema na hora de mostrar o nome(descrição) dos objetos que estão dentro do array.
O código html é esse:
<div layout="row" layout-xs="column">
<div flex>
<div class="label-view">Esportes</div>
<md-chip>{{ ctrl.esportes[0].nome}}</md-chip>
</div>
</div>
E o código que tá no js é esse:
this.esportes = [{id: 5, descricao: "Futebol"}, {id: 6, descricao: "Basquete"}]
No html só esta mostrando o primeiro por causa do esportes[0] mas eu quero que mostre todos que tem dentro do array esportes independente do tamanho dele.
Caso tenha ficado confuso, eu deixei o código nesse site: codePen
No caso vc precisa de um repeat para percorrer todos os objetos.
repare no insert que eu fiz: <md-chips input-aria-label="Esportes favoritos" ng-repeat="chipText in ctrl.chipText">
O ng-repeat="chipText in ctrl.chipText" irá percorrer todo o ctrl.chipText.
(function () {
'use strict';
angular
.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('DemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q) {
this.chipText = [{id: 5, descricao: "Futebol"}, {id: 6, descricao: "Basquete"}]
}
})();<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" ng-app="MyApp">
<md-content class="md-padding" layout="column">
<h2>Static chips.</h2>
<md-chips input-aria-label="Esportes favoritos" ng-repeat="chipText in ctrl.chipText">
<md-chip>
{{chipText.descricao}}
</md-chip>
</md-chips>
</md-content>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://gitcdn.xyz/cdn/angular/bower-material/v1.1.24/angular-material.js"></script>Veja Funcionando Aqui
Answered by Rebeca Nonato on November 25, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP