CODEWITHSUNDEEP
javascripthtmlarraysangular
Jao
Jao

Reputation: 5

Pass array variable from controller to html in Angular

So, i'm trying to iterate on an array of objects called 'cards', to display some info inside of them using ng-for, but it seems the data isn't being bound to the html, as the page stays empty even though the arrays and objects are populated. Any ideas why? Thanks in advance <3

newsController.js

'use strict';

angular
    .module('e-commerce')
    .controller('newsController', newsController)
    .directive('newsDirective', newsDirective);

/** @ngInject */
function newsController($scope) {
    var vm = this;
    $scope.cards = 
    [
        {
        dscTitulo : 'Lorem Ipsum',
        dscSubtitulo: 'Dolor sit amet conecticur adsplicit',
        dscNomeBotao: 'Ennunciatis Alan',
        urlFoto: 'https://i.pinimg.com/originals/38/bf/39/38bf39dd4bd45e83128c9600f30cba29.jpg'
        }
    ];
}

news.html

<div>
    <div *ngFor="let card of cards;">
        <li>
            {{card.dscTitulo}}
            {{card.dscSubTitulo}}
        </li>
    </div>
</div>

Upvotes: 0

Views: 549

Answers (1)

Jason White
Jason White

Reputation: 5813

The problem is you're mixing Angular 2+ (your template) with AngularJS V1 (your javascript). Your template is currently using *ngFor which is an Angular 2+ directive. You need to change your template to use ng-repeat.

<div>
  <div ng-repeat="card in cards">
    <li>
      {{card.dscTitulo}}
      {{card.dscSubTitulo}}
    </li>
  </div>
</div>

https://docs.angularjs.org/api/ng/directive/ngRepeat

Upvotes: 1

Related Questions