<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
    <script src="code-angular.js"></script>
</head>

<body ng-app="discoApp" ng-cloak>
    <div ng-controller="discoCtrl"  layout-align=" center" layout="row" flex> 
        <md-content>
            <md-list>
                <md-subheader class="md-no-sticky">Discos disponíveis:</md-subheader>
                <md-list-item class="md-3-line" ng-repeat="disco in discosDisponiveis" ng-click="incluirFavoritos(disco)">
                    <div class="md-list-item-text" layout="column">
                        <h2>{{ disco.nome }}</h2>
                        <h3>{{ disco.banda }}</h3>
                        <p>{{ disco.ano }}</p>
                    </div>
                </md-list-item>
            </md-list>
        </md-content>
        <md-content>
                <md-list flex>
                    <md-subheader class="md-no-sticky">Favoritos:</md-subheader>
                    <md-list-item class="md-3-line" ng-repeat="favorito in discosFavoritos" ng-click="null">
                        <div class="md-list-item-text" layout="column">
                            <h2>{{ favorito.nome }}</h2>
                            <h3>{{ favorito.banda }}</h3>
                            <p>{{ favorito.ano }}</p>
                        </div>
                    </md-list-item>
                </md-list>
            </md-content>
    </div>
</body>
</html>
var app = angular.module('discoApp', ['ngMaterial']);

app.controller('discoCtrl', function ($scope) {
    $scope.discosDisponiveis = [
        {
        "id": 1,
        "nome": "Is this it",
        "banda": "The Strokes",
        "ano": "2001"},
        {
        "id":2,
        "nome": "Turn on the bright lights",
        "banda": "Interpol",
        "ano": "2002"},
        {
        "id":3,
        "nome": "Hot Fuss",
        "banda": "The Killers",
        "ano": "2004"}
    ];

    $scope.incluirFavoritos = function(disco) {
        var arr = [];
        if ($scope.discosFavoritos) arr = $scope.discosFavoritos;
        arr.push(disco);
        $scope.discosFavoritos = arr;
        $scope.discosDisponiveis.splice($scope.discosDisponiveis.indexOf(disco), 1);
    }

} ); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.