List the names of all objects within the array

Question

I’m using the Angular JS chip system and I have a problem showing the name(description) of the objects inside the array. The code html that’s the one:

<div layout="row" layout-xs="column">
                <div flex>
                    <div class="label-view">Esportes</div>
                    <md-chip>{{ ctrl.esportes[0].nome}}</md-chip>
                </div>
</div>

And the code that’s on js that’s the one:

this.esportes = [{id: 5, descricao: "Futebol"}, {id: 6, descricao: "Basquete"}]

In the html only this showing the first because of the esportes[0] but I want it to show everyone inside the array esportes regardless of his size. In case you got confused, I left the code on this site: codePen

Answer 1

In case you need a repeat to go through all the objects.

notice the Insert I made: <md-chips input-aria-label="Esportes favoritos" ng-repeat="chipText in ctrl.chipText">

The ng-repeat="chipText in ctrl.chipText" will go all the way through 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>

See Working Here