1

I'm using Angular 1.2 and bootstrap 3.x and I'm trying to collapse DIV using angular-bootstrap plugin. I have form with search bar that retrieves specific data from a server in the controller using my custom $resource service:

$scope.sendSearch = function(query) {
        $scope.results = Search.query(query);
};

And I would like to un-collapse my results after retrieving them using this piece of code:

<div collapse="isCollapsed">
        <li class="well" ng-repeat="result in results" style="list-style-type: none;">

        </li>
    </div>

I am able to to so after the data is retrieved by adding simple button with correct ng-click action, but my question is - is it possible to change the value of "isCollapsed" variable in the controller? I am aware that because of the "promise" nature of the response it could be problematic. When I tried to do so, my div freezed with class="collapsing" and nothing happened, hovewer - I was still able to collapse/uncollapse div using aforementioned button, which fixed class attribute too.

SzybkiSasza
  • 1,591
  • 12
  • 27

1 Answers1

0

Just create a scope watch to see if results have changed or been retrieved.

$scope.watch("results", function(newValue, oldValue){
  if (newValue.length > 0)
  $scope.isCollapsed = !$scope.isCollapsed;
})

or 

$scope.watch("results", function(newValue, oldValue){
  if (_.isEqual(newValue, oldValue) ) // I used underscorejs
  $scope.isCollapsed = !$scope.isCollapsed;
})
Mohamed El Mahallawy
  • 13,024
  • 13
  • 52
  • 84
  • Tried your solution and ended up with the same problem. My div looks like that: `
    ` and "collapsing" class never changes to a proper one, however - watch seems to work in a proper way :).
     – SzybkiSasza Jul 01 '14 at 19:12