Pass array variable from controller to html in Angular

Question

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>

The javascript you provided is AngularJS (v1) and the template you provided is Angular 2+. What angular version are you trying to use? — Jason White
– Jason White, Commented Oct 19, 2020 at 23:57
The project i'm working is in AngularJs 1, should i change something in the template? — Jao
– Jao, Commented Oct 20, 2020 at 8:36

Jason White · Accepted Answer · 2020-10-20 11:31:04Z

1

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

answered Oct 20, 2020 at 11:31

Jason White

5,9031 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass array variable from controller to html in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related