I am toggling my div on ng-click using isVisible. The problem I am having is that every time I click the button, it runs $scope.Objectlist.push(data);. I want to only push it on the first click but at the same time I want it to push if its fetching a different object. I have a button beside every row and each row has a different id which is getting passed as the parameter for the button function.

HTML:

<tr ng-repeat="object in objectlist">
    <td>{{object.id}}</td>
    <td><button ng-click="pushData(object.id)">View</button></td>
</tr>

JS:

$scope.objectlist = [];
$scope.isVisible = false;
$scope.pushData= function(id) {
    $http.get("some variables being passed on here").success(function(data, status, headers, config){
            $scope.objectlist.push(data);
    }).error(function(data, status, headers, config){
        alert("Error");
    });
    $scope.isVisible = ! $scope.isVisible;
};

I have multiple different objects some are empty and some are not so this function cannot just check for the length of the list

I am toggling my div on ng-click using isVisible. The problem I am having is that every time I click the button, it runs $scope.Objectlist.push(data);. I want to only push it on the first click but at the same time I want it to push if its fetching a different object. I have a button beside every row and each row has a different id which is getting passed as the parameter for the button function.

HTML:

<tr ng-repeat="object in objectlist">
    <td>{{object.id}}</td>
    <td><button ng-click="pushData(object.id)">View</button></td>
</tr>

JS:

$scope.objectlist = [];
$scope.isVisible = false;
$scope.pushData= function(id) {
    $http.get("some variables being passed on here").success(function(data, status, headers, config){
            $scope.objectlist.push(data);
    }).error(function(data, status, headers, config){
        alert("Error");
    });
    $scope.isVisible = ! $scope.isVisible;
};

I have multiple different objects some are empty and some are not so this function cannot just check for the length of the list

• javascript
• arrays
• angularjs
• angularjs-scope
• angularjs-ng-repeat

Share Improve this question Follow edited Jun 30, 2015 at 23:51 user4756836 asked Jun 30, 2015 at 23:41 user4756836user4756836 1,33744 gold badges2121 silver badges4848 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

What about storing the visibility per object id (I didn't test it) :

HTML

<tr ng-repeat="object in objectlist">
    <td>{{object.id}}</td>
    <td><button ng-click="pushData(object.id)">View</button></td>
</tr>

JS

$scope.objectlist = [];
$scope.isVisible = false;
var store = {}; // Store visibility (boolean) per object id

$scope.pushData= function(id) {
    // If not stored yet
    if (!store[id]) {
        $http.get("some variables being passed on here").success(function(data, status, headers, config){
            $scope.objectlist.push(data);
            store[id] = true; // Store it and set true for the visibility
        }).error(function(data, status, headers, config){
            alert("Error");
        });
    }
    $scope.isVisible = !store[id]; // Set the visibility depending on if the object is already in the store or not
};

I'm not sure about the $scope.isVisible = !store[id]; since I don't really know the interaction it has within the view. But something similar to that could do the trick

Try this,

$scope.objectlist = [];
$scope.isVisible = false;
var uniqueIDs = {}; 

$scope.pushData= function(id) {
        $http.get("some variables being passed on here").success(callbackFn)

.error(function(data, status, headers, config){

            alert("Error");
        });

    $scope.isVisible = !uniqueIDs[id];
};



var callbackFn = function(id){
if(!uniqueIDs[id]){
    $scope.objectlist.push(data);
    uniqueIDs[id] = true;

     }
};