我有以下HTML代码
<li ng-repeat="contact in contacts">
<label ng-style="myStyle">
<input type="checkbox" ng-click="deleteContact(contact._id); myStyle={'text-decoration': 'line-through'};"/>
<img src="./images/edit_inline.gif" width="16px" height="16px" ng-click="editContact(contact._id)"/>
{{contact.username}}
{{contact.email}}
</label>
</li>
控制器代码如下:
function mainController($scope, $http) {
$scope.deleteContact = function(id) {
$http.delete('/api/contacts/' + id)
.success(function(data) {
$scope.contacts = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.editContact = function(id) {
$http.get('/api/search/'+id)
.success(function(data) {
$scope.formData = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
}
}
当我点击img标签调用editContact时,也会触发复选框ng-click事件,结果记录被删除。
我无法理解,这是怎么发生的。 我是angularJs的新手,请指导
答案 0 :(得分:1)
与AngularJS并不相关。您将两个输入都包装在标签中。标签内的单击将触发两个事件。您可以更改HTML的格式。也许,从标签标签中取出图像。
作为替代方案,您可以通过分配ID将标签与图像或chechbox明确关联。以下将标签与图像相关联。
...
<label for="image" ng-style="myStyle">
<input type="checkbox" ng-click="deleteContact(contact._id); myStyle={'text-decoration': 'line-through'};"/>
<img id="image" src="./images/edit_inline.gif" width="16px" height="16px" ng-click="editContact(contact._id)"/>
{{contact.username}}
{{contact.email}}
</label>
...
答案 1 :(得分:0)
Lable类型为相应的for
元素生成另一个事件。您可以做的是阻止此点击事件的传播:
HTML:
<img ng-click="editContact($event, contact._id)" src="./images/edit_inline.gif" width="16px" height="16px" /> {{contact.username}}
JS
$scope.editContact = function(e, id) {
e.preventDefault();
...
}