AngularJS 过滤器,设置 class 的标签和带验证的输入字段
AngularJS Filter, set class of of label and input field with validation
我有一个 Angular 应用程序,其中包含 F1 车手列表。我想在 table 上放置一个过滤器,这样我就可以通过他们的名字或姓氏来获取司机。
为此,我使用以下设计:
通常输入的标签和行都是黑色的。我想检查输入值是否仅为字符串值 (a-zA-Z)。我在部分视图中使用以下代码:
<div class="form-group col-xs-5 col-md-3">
<label class="control-label" for="inputError">input must be [a-zA-Z]</label>
<div class="form-control-wrapper">
<input ng-model="nameFilter" type="text" name="nameFilter" class="form-control empty" placeholder="Search Driver name...">
<span class="material-input"></span>
</div>
</div>
此输入值与以下过滤器绑定(在我的 controller.js 中声明)
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
if(! (/[^a-zA-Z]+/).test($scope.nameFilter)){
$scope.nameFilter.class ='control-label';
}
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
但这不起作用..我错过了什么?
正则表达式
你的正则表达式是错误的,检查它的有效性here
将其更改为
/[^a-zA-Z]+/
至
/^[A-Za-z]+$/
我有一个 Angular 应用程序,其中包含 F1 车手列表。我想在 table 上放置一个过滤器,这样我就可以通过他们的名字或姓氏来获取司机。
为此,我使用以下设计:
通常输入的标签和行都是黑色的。我想检查输入值是否仅为字符串值 (a-zA-Z)。我在部分视图中使用以下代码:
<div class="form-group col-xs-5 col-md-3">
<label class="control-label" for="inputError">input must be [a-zA-Z]</label>
<div class="form-control-wrapper">
<input ng-model="nameFilter" type="text" name="nameFilter" class="form-control empty" placeholder="Search Driver name...">
<span class="material-input"></span>
</div>
</div>
此输入值与以下过滤器绑定(在我的 controller.js 中声明)
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
if(! (/[^a-zA-Z]+/).test($scope.nameFilter)){
$scope.nameFilter.class ='control-label';
}
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
但这不起作用..我错过了什么?
正则表达式
你的正则表达式是错误的,检查它的有效性here
将其更改为
/[^a-zA-Z]+/
至
/^[A-Za-z]+$/