Angularjs 自定义指令select上需要
我使用无序列表和ng repeat创建了自己的选择下拉列表。 此指令的问题在于,它不能作为一个正常的选择/输入/文本区域工作,在html表单中使用它时,您可以在其中使用required 那么,如何实现选项required/ng required(as指令)并对自定义指令进行验证呢 我应该使用自己的验证实现吗 dropdown.htmlAngularjs 自定义指令select上需要,angularjs,angularjs-directive,required,Angularjs,Angularjs Directive,Required,我使用无序列表和ng repeat创建了自己的选择下拉列表。 此指令的问题在于,它不能作为一个正常的选择/输入/文本区域工作,在html表单中使用它时,您可以在其中使用required 那么,如何实现选项required/ng required(as指令)并对自定义指令进行验证呢 我应该使用自己的验证实现吗 dropdown.html <!-- displayed text on the select --> <div class="title" ng-class="
<!-- displayed text on the select -->
<div class="title"
ng-class="{'placeholder': !hasSelected(), 'selected': isOpened}"
ng-mousedown="openSelect()">
{{getTitle()}}
<div class="icon" ng-class="{'active': isOpened}">
<i class="fa fa-caret-down"></i>
</div>
</div>
<!-- displayed options when opening the select dropdown -->
<div class="options">
<ul ng-show="isOpened">
<!-- First option is only shown when an empty option is required -->
<li ng-click="select(null)"
ng-show="hasEmptyOption() && isSelected()"
class="empty">
{{empty}}
</li>
<!-- Options of the select -->
<li ng-repeat="option in options track by $index"
ng-click="select($index)"
ng-class="{'active': isActive($index)}">
{{option}}
</li>
</ul>
</div>
用法
预览我想我的问题有点太快了。对不起。但答案对其他所有人都很有用 用法
app.module.directive('dropdown', ['$document',
function ($document) {
'use strict';
return{
restrict: "E",
scope: {
model: "=",
empty: "@",
message: "@",
options: "="
},
templateUrl: 'app/common/directive/dropdown/dropdown.partial.html',
link: function (scope, elem, attrs) {
scope.message = "My message";
scope.isOpened = false;
scope.isSelected = function () {
return scope.model && scope.model !== null;
};
scope.hasEmptyOption = function () {
return scope.empty && scope.empty !== null;
};
scope.hasSelected = function () {
return (scope.selected);
};
scope.select = function (index) {
if (index !== null) {
scope.model = scope.options[index];
} else {
scope.model = null;
}
scope.closeSelect();
};
scope.closeSelect = function () {
scope.isOpened = false;
$document.unbind('click');
elem.unbind('click');
};
scope.openSelect = function () {
if (scope.isOpened) {
scope.closeSelect();
} else {
scope.isOpened = true;
$document.bind('click', function () {
scope.closeSelect();
scope.$apply();
});
elem.bind('click', function (e) {
e.stopPropagation();
});
}
};
scope.getTitle = function () {
if (scope.model && scope.model !== null) {
return scope.model;
} else if (scope.message) {
return scope.message;
} else {
return "Select";
}
};
}
};
}
]);
<dropdown message="Select state" model="selectedState" options="states" empty="unselect"></dropdown>
<dropdown message="Select state" model="selectedState" options="states" empty="unselect" valid-drop-down></dropdown>
/**
* Based on
* http://stackoverflow.com/questions/24692775/angularjs-setvalidity-causing-modelvalue-to-not-update
*/
app.module.directive('validDropDown', [
function () {
return {
require: 'ngModel',
link: function (scope, elem, attr, ngModel) {
// Create validators
ngModel.$validators.validDropDown = function (modelValue, viewValue) {
/* When no value is present */
var isValid;
if (!modelValue || modelValue.length === 0) {
isValid = false;
} else {
isValid = true;
}
/* Set required validator as this is not a standard html form input */
ngModel.$setValidity('required', isValid);
/* Set custom validators */
ngModel.$setValidity('validDropDown', isValid);
/* Return the model so the model is updated in the view */
return modelValue;
};
// Watch for changes to the model
scope.$watch(attr.ngModel, function () {
/* When the model is touched before */
if (ngModel.$touched) {
/* When the model is not dirty, Set ngModel to dirty by re-applying its content */
if (!ngModel.$dirty) {
ngModel.$setViewValue(ngModel.$modelValue);
}
}
/* When the model has a value */
if (ngModel.$modelValue) {
/* When the model is not touched before */
if (!ngModel.$touched) {
ngModel.$setTouched();
}
}
return ngModel;
});
// Validate on creation
ngModel.$validate();
}
}
}
]);