当相应的表单控件具有必需属性时,我希望我的表单标签在标签旁边显示一个红色星号.
如果需要标签的相应输入,select或textarea(标签对应的元素),我希望在页面加载期间动态地将星号附加到标签,而不是硬编码星号.
我在下面创建了指令,该指令有效.但有没有更好,更本土的方式来实现我的目标？如果div.form-group中的相应表单控件具有必需属性,则此指令查找所有div.form-group容器,并在标签后添加红色*字符.
myApp.directive('labelsrequired',function(){
return {
restrict: 'A',require: 'ngModel',link: function(scope,elem,attrs){
elem.find('div.form-group').each(function(i,formGroup){
var formControls = $(formGroup).find('input,select,textarea');
console.log(formControls)
if (0 !== formControls.length && undefined !== $(formControls[0]).attr('required')){
jLabel = $(formGroup).find('label');
jLabel.html(jLabel.html()+ "<span class='red-color'>*</span>");
}
})
}
}
});
该指令假定所有输入,选择和textareas都在div.form-group容器内.
<div class='form-group'> <label>First Name</label><!-- this label gets an asterisk --> <input name='fname' required /> </div> <div class='form-group'> <label>Favorite Food</label><!-- this label does not get an asterisk --> <input name='favFood' /> </div>
解决方法
建立科里的答案：
我只是使用编译而不是链接,因为我看到我的必需属性没有应用于我的输入元素.我还为我提供的任何下拉列表中都包含了一个选择标记.
app.directive('inputrequired',function () {
return {
restrict: 'A',compile: function (elem) {
elem.find('label').append("<sup><i class='fa fa-asterisk'></i></sup>");
elem.find('input').attr('required','required');
elem.find('select').attr('required','required');
}
};
});
