[英]Setting HTML property with JQuery
I am using a combination of JQuery, Modernizr, and Angular to achieve a custom Datepicker solution for a table generated via ng-repeat. 我正在结合使用JQuery,Modernizr和Angular为通过ng-repeat生成的表实现自定义Datepicker解决方案。 The solution works if I hard-code the Angular directive of "datepicker" into the HTML.
如果将“ datepicker”的Angular指令硬编码到HTML中,则该解决方案有效 。
So, for example, within my table using ng-repeat"revenue in runway.revenues"
this works: 因此,例如,在我的表格中使用
ng-repeat"revenue in runway.revenues"
可以正常工作:
<td>
<input type="date" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" datepicker required/>
</td>
But I would like for this to only be put into place when the user is in a browser that requires it. 但是我希望仅在用户使用浏览器时才需要这样做。 So, with this in mind, I have deleted
datepicker
from the above HTML, and written this in JS: 因此,考虑到这一点,我从上面的HTML中删除了
datepicker
,并用JS编写了它:
$(function() {
var nativeDateInputIsSupported = Modernizr.inputtypes.date;
if (!nativeDateInputIsSupported) {
$('input[type="date"]').prop("datepicker", true)
}
});
However, when I land on the page in Firefox, it does not appear to work. 但是,当我进入Firefox的页面时,它似乎无法正常工作。
Further, if I try to debug by doing something like console.log($('input[type="date"]').prop("class"))
the value returned will be undefined
(which should be form-control
). 此外,如果我尝试通过类似
console.log($('input[type="date"]').prop("class"))
进行调试,则返回的值将是undefined
(应为form-control
) 。
Any tips would be greatly appreciated! 任何提示将非常感谢!
Use .attr()
or .setAttribute()
to set attribute at HTML 使用
.attr()
或.setAttribute()
在HTML上设置属性
document.querySelector("input").setAttribute("datepicker", true); console.log(document.querySelector("input").outerHTML);
<input type="text">
$("input").attr("datepicker", true); console.log($("input")[0].outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <input type="text">
$("input").prop("datepicker", true); console.log($("input")[0].outerHTML); // attribute not set at HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <input type="text">
I was able to get this to work by taking an idea from user @guest271314 and expanding on it a bit! 通过从用户@ guest271314获得一个想法并对其进行扩展,我能够使其工作!
Rather than adding the attribute to the HTML based on Modernizr, I set a $scope variable equal to a boolean value. 我没有将属性添加到基于Modernizr的HTML中,而是将$ scope变量设置为一个布尔值。
$(function() {
var nativeDateInputIsSupported = Modernizr.inputtypes.date;
if (!nativeDateInputIsSupported) {
$scope.datePickerValue = "true"
}
});
Within my directive, I added this: 在我的指令中,我添加了以下内容:
function link(scope, element, attrs, controller) {
var requiredParam = attrs.datepicker === 'true'; //This was what was added
if (requiredParam) { //Checking for boolean value
element.datepicker({
dateFormat: "yy-mm-dd",
maxDate: '0'
});
}
}
Which meant that in my HTML I added datepicker="{{datePickerValue}}"
to the Date inputs, which now works!! 这意味着我在HTML
datepicker="{{datePickerValue}}"
到Date输入中,现在可以使用了! Thank you for all of the help, I wouldn't have come back to this without your input =) 谢谢您提供的所有帮助,如果没有您的投入,我将不会再回到这个问题上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.