display a list of objects in Angular 1.5

Question

My goal is to declare a static list of objects with some attributes and then map that list onto a <ul> list.

I've got the 'hello-world' component from a tutorial working, but the game-search tag doesn't print anything out.

Here's my code so far:

<html>
<head>
    <title>Slots</title>
    
    <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script type = "text/javascript">
    var app = angular.module("slots", []);
    

    
    app.component("helloWorld",{
        template: 'Hello -  {{$ctrl.name}}', 
        bindings: {name: '@' }
    });
    
    app.component("gameSearch", {
        controller: function() {
            var ctrl = this;
            alert("controller function");
            this.$onInit = function() {
                alert("On Init");
                ctrl.gameData = [];
            };
            
            
        },
    });
    
    app.run(function() {
        
    })
    </script>
</head>
<body>

<div ng-app="slots"> 
    <hello-world name = "John"> </hello-world>
    
    <game-search>
        {{gameData.length}}
    </game-search>
</div>



</body>
</html>

bendelszl · Accepted Answer · 2020-10-13 21:02:47Z

You need a template for your component. (And you have to bind it to your controller with bindToController: true and controllerAs: 'gameSearch' if you don't want to use $scope)

<html>
<head>
    <title>Slots</title>
    
    <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script type = "text/javascript">
    var app = angular.module("slots", []);
    

    
    app.component("helloWorld",{
        template: 'Hello -  {{$ctrl.name}}', 
        bindings: {name: '@' }
    });
    
    app.component("gameSearch", {
        bindToController: true,
        controllerAs: 'gameSearch',
        controller: function() {
            var ctrl = this;            
            this.$onInit = function() {                
                ctrl.gameData = [];
            };
        },
        template:'{{gameSearch.gameData.length}}'
    });
    
    app.run(function() {
        
    })
    </script>
</head>
<body>

<div ng-app="slots"> 
    <hello-world name = "John"> </hello-world>
    
    <game-search></game-search>
</div>



</body>
</html>

Collectives™ on Stack Overflow

display a list of objects in Angular 1.5

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