如何解决如何从传单弹出 html 中的复选框 onchange 调用 Angular 函数?
我正在使用 Leaflet,但我的标记很少。因此,当将鼠标悬停在标记上时,会打开一个弹出窗口,在该弹出窗口中,有一个复选框。所以我需要的是每当用户单击该复选框时,它应该更改弹出内容。例如,
复选框名称是“更多信息”。默认弹出窗口包含悬停后的纬度和经度。当用户单击该复选框时,弹出窗口应显示城市、状态以及纬度和经度。我在复选框的 onchange
事件中创建了一个带有函数的复选框,但它没有调用创建的 angular 函数,而是在寻找 JavaScript 函数。我如何才能调用 Angular 函数,或者是否有其他解决方法来实现它?
我使用过以下方法,
<input type="checkBox" onchange="showDetails(this);"/>
<input type="checkBox" onchange={{showDetails(this);}}/>
我的示例代码如下
L.Routing.control({
waypoints: waypoints,lineOptions: {
styles: [{color: '#453f30',opacity: 1,weight: 5}],addWaypoints: false,extendToWaypoints: false,missingRoutetolerance: 0,},plan: L.Routing.plan(waypoints,{
createMarker: function (i,wp) {
return L.marker([latitude,longitude],{
icon: icon,}).bindPopup('<input type="checkBox" onchange={{showDetails(this);}}/>More Info',{
closeButton: true,}).on("mouSEOver",function (event) {
event.target.openPopup();
});
}
})
}).addTo(this.map);
解决方法
您已经非常接近解决方案了。您可以像上面那样使用与 popupopen
事件相同的 mouseover
事件。您的复选框应该是这样的。
<input type="checkbox" id="chkbox1"/>
然后进行如下操作,
}).bindPopup('<input type="checkbox" id="chkbox1"/>More Info',{
closeButton: true,}).on("mouseover",function (event) {
event.target.openPopup();
}).on("popupopen",function (event) {
// Here I am using JQuery. You can add JQuery to your Project
$("#chkbox1").on("click",e => {
e.preventDefault();
if ($("#chkbox1").is(":checked")) {
// your code goes here if checked
} else {
//
}
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。