Can't bind data to view angularjs

Question

I’ve got some problem with binding my data to my view with angularjs in the ionic framework.

This is my controller.js:

.controller('InventoryCtrl', function($scope, Category, Inventory) {
$scope.categories = Category;


$scope.searchInventory = function(category){
var word = category.Category;

var ref = new Firebase('https://vivid-heat-2430.firebaseio.com/');

var invenRef = ref.child('Inventories');
var prodRef = invenRef.child('Products');


invenRef.orderByChild("Products").on("child_added", function(snapshot) {
  var data = snapshot.val();
  var store = data.Inventory;
  var prod = data.Products;
  var test = Object.keys(prod);    

  for( var i = 0; i < test.length; i++){
    if (test[i] == word) {
      console.log(test[i]);
      console.log("Storage place: " + data.Inventory + " Datum inventaris: " + data.Date);
      $scope.show= test[i];

    };

  };

});

};
})

Here I’m getting my products from my array. Then I’m comparing it. It will give me the matching objects and it will also give me the storage place where it belongs to. I can log this in my console. But when I’m trying to bind it to my view. It gives me nothing.

this is my index.html:

<ion-content>
    <p><b>Zoek categorie</b></p>
  <ion-scroll direction="y" >
    <div style="max-height: 300px" ng-controller="InventoryCtrl">
      <ion-list>
        <ion-radio ng-repeat="category in categories" class="item-accordion" ng-model="checked.check" value="{{category.Category}}" ng-click="searchInventory(category)">
          <p>{{category.Category}}</p>
        </ion-radio>
        <br>
      </ion-list>
    </div>

    <div>
        <ion-list>
            <ion-item>
              {{show}}                  
            </ion-item>
        </ion-list>
      </div>
  </ion-scroll>
  </ion-content>

And I don’t understand what I did wrong… Is it because my $scope.show is still inside the .on method?

Yerken · Accepted Answer · 2015-12-18 14:59:58Z

2

Not really familiar with Firebase, but I am assuming it is a 3rd party service u are using to extract the data. Possibly ur data update occurs outside of the angular digest cycle. Just add this after you are done attaching the data to the scope.

$scope.digest()

answered Dec 18, 2015 at 14:59

Yerken

1,9421 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Evan Burbidge · Accepted Answer · 2015-12-18 14:58:02Z

0

Hey i'm guessing your Category dependency is an service being inject into your controller? In that case what i'd usually do is write something like this.

.controller('InventoryCtrl', function($scope, Category, Inventory) {
    $scope.categories = [];
    Category.query(funciton(categories){
        $scope.categories = angular.copy(categories);
    });

This will store your categories after you query your service in your controller. After that simply use something like an NG-REPEAT in your html something like this.

<li ng-repeat='cat in categories'>
    {{cat.name}}
    {{cat.id}}
</li>

answered Dec 18, 2015 at 14:58

Evan Burbidge

8679 silver badges17 bronze badges

1 Comment

Season Over a year ago

I can bind my categories data i got from firebase to {{category.Category}}. But I can't bind the search results to {{show}}

David East · Accepted Answer · 2015-12-18 21:19:30Z

0

@YerkenTussupekov is correct about 3rd party services and the digest cycle.

That's why at Firebase we created AngularFire.

AngularFire is an Angular module that provides a set of services for synchronized collections and authentication.

angular.module('app', ['firebase']) // include it in the dep array
  .constant('FirebaseUrl', '<my-firebase-app>') // https://vivid-heat-2430.firebaseio.com/ in your case
  .service('rootRef', ['FirebaseUrl', Firebase)
  .factory('categoryArray', CategoryArray)
  .controller('MyCtrl', MyController);

function CategoryArray(rootRef, $firebaseArray) {
  var invenRef = rootRef.child('Inventories');
  return $firebaseArray(invenRef);
}

function MyController($scope, categoryArray) {
  $scope.category = categoryArray;
}

edited Dec 18, 2015 at 21:19

answered Dec 18, 2015 at 17:38

David East

32.7k6 gold badges70 silver badges83 bronze badges

2 Comments

Season Over a year ago

Maybe I was not clear enough in my question. As I said I’m trying to bind my search result to my view. But here I’m trying to bind the search results in {{show}} I don’t see how you bind the search results to {{show}} in you answer :( Can you explain a bit more, please? :)

Season Over a year ago

I can bind my data of categories I got from firebase to my view {{category.Category}}. I only can't bind the search results to {{show}}

Collectives™ on Stack Overflow

Can't bind data to view angularjs

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related