*ngFor client side

Question

I’m implementing a crud where I’m using the ngFor to iterate a list. But I don’t know how to do it on the client side. I think 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>
<div ng-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>

Answer 1

There’s been a mix-up, ngFor and ngModel are present in version 2+ of Angular. Already in the Angular 1 the correct is ng-repeat and 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>

References

• Angularjs API Docs
• Angular Docs