CODEWITHSUNDEEP
javascriptangularjsfirebasefirebase-realtime-database
Tarmizi Hamid
Tarmizi Hamid

Reputation: 103

ng-repeat in Angular.js not working as expected

I have an object of JavaScript that I push it into an array, the code like below:

    //Firebase Retrieve Data
  var ref = firebase.database().ref().child("pelanggan");
  ref.on("child_added", function(snapshot) {
  var key = snapshot.key;
  console.log("SALES ID : " + key);

    var pelangganArr = new Array();
    var ref2 = firebase.database().ref().child("pelanggan").child(key);
    ref2.on('child_added', function(data) { 
    var pelanggan = new Object(); 
    pelanggan.alamat = data.val().alamat;         
    pelanggan.email = data.val().email;
    pelanggan.identitas = data.val().identitas;
    pelanggan.layanan = data.val().layanan;
    pelanggan.lo = data.val().lo;
    pelanggan.lt = data.val().lt;
    pelanggan.nama = data.val().nama;
    pelanggan.noHp = data.val().noHp;

    pelanggan.salesId = key;

    pelangganArr.push(pelanggan);
    console.log(pelanggan.salesId+" : "+pelanggan.nama+","+pelanggan.identitas+","+pelanggan.alamat+","+pelanggan.email);

And I use ng-repeat to display it in html, on the console I got:

Sales Controller loaded..
sales.js:120 sales01 : Endang,85764321,Bintaro,[email protected]
sales.js:120 sales01 : Gugi Pratama,1234567894,Jl. Mampang Prapatan,[email protected]
sales.js:120 sales01 : Endang,85764321,Bintaro,[email protected]
sales.js:120 sales01 : Gugi Pratama,1234567894,Jl. Mampang Prapatan,[email protected]
sales.js:120 sales01 : Endang,85764321,Bintaro,[email protected]
sales.js:120 sales01 : Gugi Pratama,1234567894,Jl. Mampang Prapatan,[email protected]
sales.js:120 sales02 : imam farisi,123456789,Jl. Pejaten Raya No.1, Pasar Minggu,[email protected]
sales.js:120 sales02 : Budi,1234567891,Jl. Ragunan Raya No. 1, Jakarta Selatan,[email protected]
sales.js:120 sales02 : Riza Putriyani,1234567892,Jl. Kemang Raya No. 1, Jakarta Selatan,[email protected]
sales.js:120 sales02 : imam farisi,123456789,Jl. Pejaten Raya No.1, Pasar Minggu,[email protected]
sales.js:120 sales02 : Budi,1234567891,Jl. Ragunan Raya No. 1, Jakarta Selatan,[email protected]
sales.js:120 sales02 : Riza Putriyani,1234567892,Jl. Kemang Raya No. 1, Jakarta Selatan,[email protected]
sales.js:120 sales02 : imam farisi,123456789,Jl. Pejaten Raya No.1, Pasar Minggu,[email protected]
sales.js:120 sales02 : Budi,1234567891,Jl. Ragunan Raya No. 1, Jakarta Selatan,[email protected]
sales.js:120 sales02 : Riza Putriyani,1234567892,Jl. Kemang Raya No. 1, Jakarta Selatan,[email protected]

But my view is blank, I wrote the script like:

<tbody ng-controller="SalesCtrl as t">
   <tr ng-repeat="pelanggan in pelangganArr">
      <td>{{pelanggan.alamat}}</td>
      <td>{{pelanggan.email}}</td>
      <td>{{pelanggan.lo}}</td>
      <td>{{pelanggan.lt}}</td>
      <td>{{pelanggan.nama}}</td>
      <td>{{pelanggan.noHp}}</td>
      <td></td>
      <td><a class="btn btn-success" ng-click="showEditSalesForm(sales)">Edit</a></td>
      <td><a class="btn btn-danger" ng-click="removeSales(sales)">Delete</a></td>
   </tr>
</tbody>

to render it.

I am new in Angular.js.

Upvotes: 0

Views: 62

Answers (2)

Yauza
Yauza

Reputation: 180

In your controller declare pelangganArr as $scope.pelangganArr. Only scope variables are recognised by angular in the DOM and provide 2 way binding.

Upvotes: 0

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

Try

<tr ng-repeat="pelanggan in t.pelangganArr">

Upvotes: 1

Related Questions