Menu
I've got a button that's used to delete a question:
<a class="btn-small float-right" data-ng-click="deleteQuestion(question)">
<i data-ng-class="{true: 'icon-step-backward', false: 'icon-remove'}
[question.IsDeleted]"></i>
</a>
This is the code behind the button:
$scope.deleteQuestion = function (data) {
if (data.IsDeleted) {
data.IsDeleted = false;
for (var i = 0; i < deletedQuestions.length; i++) {
if (deletedQuestions[i] == data) {
deletedQuestions.splice(i, 1);
}
}
} else {
data.IsDeleted = true;
if ($.inArray(data, deletedQuestions) === -1) {
deletedQuestions.push(data);
}
}
};
Now when I press the button I noticed the function has been fired twice. The first time it deletes the question, the second time it undoes that action.
What I want was one button to delete a question and when you click it again, it undoes that action.
I'm just wondering what I've overlooked...
EDIT Here is a fiddle: http://jsfiddle.net/rquackenbush/AbWKs/
267
Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
Another significant difference between ng-click and onclick is the execution context. Code inside an onclick attribute executes against the global window object, while an expression inside of ng-click executes against a specific scope object, typically the scope object representing the model for the current controller.
In this article, we will learn how to get many/multiple functions to the ng-click directive passed, in just one click. The key is to add a semi-colon (;) or a comma (,). All the functions must be separated by a (;) or a (, ). This syntax is supported by all the elements in the HTML.
I found out what the problem was.
The link is inside a list:
<li class="question-item"
data-app-bind-html="question.template">
<a class="btn-small float-right" data-ng-click="deleteQuestion(question)">
<i data-ng-class="{true: 'icon-step-backward', false: 'icon-remove'} [question.IsDeleted]">
</i>
</a>
<li>
I've made an data-app-bind-html which binds a html part inside it. This caused the link to be bound twice, which made it fire twice too. To solve this I just made sure the directive binds the html part and not the whole listitem.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With