Esta havendo uma confusão, ngFor e ngModel estãopresente na versão 2+ do Angular. Já no Angular 1 o correto é ng-repeat
e ng-model
:
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>
<div ng-app="crudlist"ng-controller="MyCrud">
<h1>{{title}}</h1>
<input type="text" ng-model="nome">
<input type="text" ng-model="album">
<input type="text" ng-model="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 ng-repeat="item in 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>
###Referências