I've a function which deletes individual items from the array, based on the value i pass. Here's the flow:- I call a function on click of a button deleteImage('{{image}}') and in the controller i've function defined. Here's the function
$scope.deleteImage = function(image) {
console.log(image); // Output : {{image}} instead of image url
// code to delete items from array
}
The problem here is when i checked the console, i can see the image value in the element attribute ng-click="deleteImage('url_of_the_image')", but in controller, the image variable is having the value {{image}}. What could be the issue here ?
you do not need to interpolate the value.
ng-click="deleteImage(image)"
should be enough to fix your issue.
Related
My flowgraph uses jsPlumb to make the nodes draggable and later on allow for connections between nodes. However, even only with the dragging I am held up by an error.
Whenever I drag a node, the console logs an error message for each pixel moved. The error is jsPlumb function failed : TypeError: Cannot read property 'el' of undefined and I managed to track it down to be in jsplumb.js line 4919.
There, the local variable elId (which represents the id of the node's div) is set correctly to node-1. However, inside of the managedElements object the node is saved with the key node-{{$ctrl.node.id}}. Therefore, when attempting to access managedElements[elId].el (in line 4919), the (correct) elId is not found as a key, which prompts the error above.
I could not figure out when managedId is set. The controller that is part of the node .component has the following code (the JsPlump service simply returns a jsPlumbInstance):
const NodeController = ['$element', 'JsPlumb', function ($element, JsPlumb) {
const nodeDiv = $element.children('.node');
JsPlumb.draggable(nodeDiv);
}];
I also tried setting the draggable method when the template is fully linked (I'm new to AngularJS and was not sure whether the interpolation has taken place when the controller is called):
const NodeController = ['$element', 'JsPlumb', function ($element, JsPlumb) {
const ctrl = this;
ctrl.$postLink = function () {
const nodeDiv = $element.children('.node');
JsPlumb.draggable(nodeDiv);
};
}];
All of these snippets still produce an error in the console whenever a mouse move event is fired.
Do you have an idea of how I can resolve this bug? Can I somehow provide the correct id for the managedElements?
The problem was that $element did not interpolate the id and therefore an element with an invalid id was passed through to jsPlumb and got saved in managedElements.
Since I do not know how to access the interpolated element inside the controller, I manually reset the id on the element in the controller and then passed the element on to jsPlumb.
I have a table name Post, the function below Posts.query give me all the post and stock them in a variable postsATraiter.
Posts.query({}, function() {
$scope.postsATraiter = $scope.posts;
});
This works fine I can do a :
console.log($scope.postsATraiter.length);
This give me the number of post who are in my table, but now I would like to display the value inside my postsATraiter ( date for exemple ).
I try this :
console.log(postsATraiter.valueOf(1).date);
This is not working, I think valueOf is not the correct function for get one element, but I don't know which one I need to use. Thanks for answer
You can iterate through the array of objects and print the needed property value as
$scope.postsATraiter.forEach(function(element) {
console.log(element.date);
});
The function is called for each object in the array.
To access the first element's date property you can simply do
$scope.postsATraiter[0].date
I am still a beginer in angularjs
How to reset the input field in the below plunker.
Enter the value in the input field and click on review will populate the value in the view. I need to clear those on clicking reset
<iframe src='http://embed.plnkr.co/JzmpYK/preview'></iframe>
Thanks in advance
Modify your reset() function so that it is equaling a copy of the original vehicles variable. You want to reference an object that is not being updated like a masterCopy variable.
$scope.vehiclesMaster = angular.copy($scope.vehicles);
$scope.reset = function(){
$scope.vehicles = $scope.vehiclesMaster;
}
<textarea ng-model="statement" name="statement"></textarea>
when i typing some values in text area i can trigger a function in cotroller by using
var autosave = function(newVal, oldVa){
console.log('inside the function');
}
$scope.$watch('statement', autosave);
here i want to check the value array contain some value, if the values exist i want to trigger some function in controller
$scope.testAry =[];
i am going to push some values
$scope.testAry.push({username: jenson});
This time the array contain the values so i need to trigger a function
$scope.$watch('testAry', autosave); // not working
can anyone help me to trigger the autosave function if the array contain at least one value
Pass third parameter true to watch array values:
$scope.$watch('testAry', autosave, true);
Or you may use $watchCollection.
I want to clear an input field on button click, but I want to have a function in controller for it.
So I use
<div ng-click="emptyInput('filter')">clear</div>
And then a function
$scope.emptyInput = function(elemName){
$scope.elemName = null;
}
but it does not work, because it clears $scope.elemName that does not exist at all. How can i tell to use function parameter as name after $scope. ?