How to update a node or edge property of visjs using angularjs?

Question

I have a requirement to hide or unhide some nodes and edges depending on some data. I can achieve it by traversing through visjs's data but that will trigger stabilization everytime one hides or unhides (this overwrite existing data).

I found this example which adds, updates and removes a node by directly changing nodes value by using add, update & remove functions. This dynamically does these operations without stabilizing, but when I try the same thing in AngularJS I encounter the following error

org_nodes.update is not a function

Snippet taken from source of this example

function addNode() {
    var newId = (Math.random() * 1e7).toString(32);
    nodes.add({id:newId, label:"I'm new!"});
    nodeIds.push(newId);
}

function changeNode1() {
    var newColor = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16);
    nodes.update([{id:1, color:{background:newColor}}]);
}

function removeRandomNode() {
    var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
    nodes.remove({id:randomNodeId});

    var index = nodeIds.indexOf(randomNodeId);
    nodeIds.splice(index,1);
}

Check out my plunker which demonstrates this. What is it that I am missing here? Note - I am using angular-visjs

Answer 1

You appear to be slightly off when calling update. Referring to that example, the update function requires an argument passed that is a new vis.DataSet. You are instead supplying a simple array. We can approach this a couple of ways, but let's make the change when declaring $scope.data as such

$scope.data = {
    nodes: new vis.DataSet(org_nodes),
    edges: edges
};

Now that we have done this, within $scope.agentClicked lets modify our call to reference our vis.DataSet object

$scope.agentClicked = function() {
    $scope.data.nodes.update([ ... ]);
}

Plunker Link - updated demo