个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用设置表单有效性的指令。一切都相应地进行，但是自定义有效性的 bool 值不会立即返回，确切地说，它需要执行额外的按键操作。顺便说一句，我使用“element.blur”来设置自定义有效性。
这是 HTML 代码:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form ng-controller="myCtrl" name="bioManagementForm" novalidate>
<fieldset ng-repeat="bioEducation in bioEducations" data-ng-form="nestedbioEducationsForm">
Degree: <br />
Availability: -- {{ nestedbioEducationsForm.bio_education_degree.$error.available }}
<input class="form-control input-form" ng-model="bioEducation.bio_education_degree" name="bio_education_degree" id="bio_education_degree" auto-complete-validation ui-items="searchDegreeItems">
<span class="errors" id="error-bio-education-degree">
<span ng-if="nestedbioEducationsForm.bio_education_degree.$error.available"> * Not Available <br /></span>
</span>
School: <br />
Availability: -- {{ nestedbioEducationsForm.bio_education_school.$error.available }}
<input class="form-control input-form" type="text" ng-model="bioEducation.bio_education_school" name="bio_education_school" id="bio_education_school" auto-complete-validation ui-items="searchSchoolItems">
<span class="errors" id="error-bio-education-school">
<span ng-if="nestedbioEducationsForm.bio_education_school.$error.available"> * Not Available <br /></span>
</span>
</fieldset>
</form>
</body>
</html>
JS代码如下:
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
$scope.name = "dean";
$scope.originalBioEducations = [{}];
$scope.bioEducations = angular.copy($scope.originalBioEducations);
$scope.searchSchoolItems = ["Don Bosco", "JRU", "UST", "FEU"];
$scope.searchDegreeItems = ["BSIT", "BSED", "ECE", "COE"];
});
function monkeyPatchAutocomplete() {
// Don't really need to save the old fn,
// but I could chain if I wanted to
var oldFn = $.ui.autocomplete.prototype._renderItem;
$.ui.autocomplete.prototype._renderItem = function( ul, item) {
var re = new RegExp( "(" + this.term + ")", "gi" );
var t = item.label.replace(re,"<span style='font-weight:bold;color:#04508e;'>" + this.term + "</span>");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + t + "</a>" )
.appendTo( ul );
};
}
monkeyPatchAutocomplete();
function remove_duplicates_safe(arr) {
var obj = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
if (!(arr[i] in obj)) {
arr2.push(arr[i]);
obj[arr[i]] = true;
}
}
return arr2;
}
myApp.directive('autoCompleteValidation', function($timeout){
return {
require: 'ngModel',
scope: {
uiItems: "="
},
link: function(scope, element, attrs, ctrl){
scope.$watchCollection('uiItems', function(val){
items = scope.uiItems.filter(function(n){ return n != undefined });
element.autocomplete({
source: remove_duplicates_safe(items),
minLength:2,
});
element.bind('blur', function(){
_val = element.val();
_index = items.indexOf(_val);
if(_index == -1){
ctrl.$setValidity('available', false);
console.log("dean");
}else{
ctrl.$setValidity('available', true);
console.log("armada");
}
});
});
}
}
});
附注
该应用程序是一个通过 ng-repeat 实现的动态字段。我也使用 data-ng-form 进行动态验证。两个输入字段均由 jquery ui 自动完成运行。验证应检测字段上的值是否在数组(具有“Items”范围变量的数组)内的自动完成选择中。如果输入字段中的内容不在选项中，它应该抛出错误。
这是 plunkr 中的一个示例:http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview
最佳答案
如果您想避免添加按键事件，您应该在 ngModelController 上使用 $validators 对象属性。无论如何，这是创建验证器指令的正确方法。您可能还想将更改事件添加到自动完成中，以便您可以 $setViewValue。
scope.$watchCollection('uiItems', function(val){
items = scope.uiItems.filter(function(n){ return n != undefined });
element.autocomplete({
source: remove_duplicates_safe(items),
minLength:2,
change: function () {
ctrl.$setViewValue(element.val());
}
});
});
ctrl.$validators.available = function (modelValue, viewValue) {
var value = modelValue || viewValue;
if (items) {
var _index = items.indexOf(value);
return _index !== -1;
}
}
关于javascript - AngularJS 中表单 setvalidity 的延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37427586/
26
4
0
我有一张用户表 users +------+ - user_id ... ... - updated_by 据我所知，updated_by 列应该在 user_id 列上引用此表。我不确定，这
我是 SQL 新手，我有 2 个包含这些列的表: table structures__|id|name|nation_id|image| table nations______|id|nation|
我正在使用 codeigniters sql 选择来选择不在一组 id 中的用户。 $this->db->select('fbuid')->where_in('fbuid', $friends); $
找不到具体的答案所以我想问一下。简而言之，我有一个表，它根据存储在我的数据库中的数据从 API 检索信息，我想要做的就是从该表中获取某些列的总数，而不是全部列，以便我可以在其他地方使用它们网站。例如，
这是 phpMyAdmin 为我生成的 SQL 语句: SELECT * FROM `table_name` WHERE 1 可以看到 table_name 被 ` 字符包围。 为什么？ 最佳答案 用
我有两个这样的表 我想在这里从 Table1 插入到 Table2。这就是我想要的。 取 MOU = 10。它在同一行中有 num1 和 hour1。我想将它插入到与 num1 同一行与 hour1
我的任务是使用 C++ 编写一个程序，以使用 Gamma 分布计算概率。如果我已经找到函数值，如何将其更改为 Gamma 分布表中的值？我不知道公式。 例如Fg(8;8)，在表中为0.5470。而表中
我在查看 HTML 电子邮件时遇到问题，需要格式化 css 以与 HTML 脚本内联。 我有多个表使用的以下 td css。 td.gridtopleft { border-left: solid
我正在使用来自 pip 的最新 sqlalchemy 和最新的 pymssql 连接 mssql 服务器 8.00.2039(2005 年？)困难在于表和列名称是俄语。是否可以用 sqlalchemy
我有一个有趣的问题 - 我需要 JOIN 语句的完全相反。 我有一个名为 invoices 的表和另一个名为 payments 的表。我想按顺序检索没有任何付款的发票，但之后是有付款的行。 发票表有这
我有两个表: 主题:[id, ...] 类别:[主题.id, ...] 我想从表 #1 中选择所有主题，但不包含 #2(类别)中的条目。 任何提示表示赞赏(: 最好的问候 最佳答案 Sachin 已经
MYSQL: 我正在使用表 information_schema.tables 中的 AUTO_INCRMENT 列来获取下一个 id。 如下: SELECT AUTO_INCREMENT FROM
我是一名优秀的程序员,十分优秀！