I'm implementing a crud where I'm using ngFor to iterate through a list. But I do not know how to do it on the client side. I believe this will only be possible by creating a component in my main.js. But I'm not sure.
var app = angular.module("crudlist", []);
app.controller("MyCrud", function($scope) {
$scope.title = 'Músicas';
$scope.musicas =[];
$scope.id = 0;
$scope.nome = '';
$scope.album = '';
$scope.ano = '';
$scope.object = {};
$scope.add = function(){
$scope.object = {id: $scope.id ,nome:$scope.nome , album:$scope.album , ano:$scope.ano };
$scope.musicas.push($scope.object);
$scope.id += 1;
};
$scope.delete = function(){
$scope.musicas.pop();
};
$scope.clone = function(id){
$scope.object = {id: $scope.id ,nome:$scope.musicas[id].nome , album:$scope.musicas[id].album , ano:$scope.musicas[id].ano };
$scope.musicas.push($scope.object);
$scope.id += 1;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="crudlist"ng-controller="MyCrud">
<h1>{{title}}</h1>
<input type="text" ngModel="nome">
<input type="text" ngModel="album">
<input type="text" ngModel="ano">
<button ng-click="add()" >Adicionar música</button>
<table style="width:100%">
<tr>
<th>id</th>
<th>Nome</th>
<th>Albúm</th>
<th>Ano</th>
</tr>
<tr *ngFor="let item of musicas" >
<td>{{item.id}}</td>
<td>{{item.nome}}</td>
<td>{{item.album}}</td>
<td>{{item.ano}}</td>
<button ngModel="delete()" >Delete</button>
<button ngModel="clone(item.id)" >Clone</button>
</tr>
</table>
</div>