gpt4 book ai didi

javascript - 将模型绑定(bind)到文本框后调用事件 - Angular

转载 作者:行者123 更新时间:2023-11-28 00:01:08 25 4
gpt4 key购买 nike

我想为我的应用程序中的每个文本框(输入)实现一个类似绑定(bind)完成的事件。

在这里,我尝试在 onblur 事件中的某些条件下添加 CSS 类。没关系。但我不想在将某些模型绑定(bind)到文本框后执行相同的函数。

  var app = angular.module("main", []);

var MainController = function($scope, $http) {
$scope.message = "CSS Change";
};
app.directive('floatBox', ['$document', '$timeout', '$rootScope', function($document, $timeout, $rootScope) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attr) {
//this is not for validation, this is just a sample for what I want to do.
//Please don't suggest Angular validations.
element.on('blur', function(event) {
changeCSSClass(element);
});

function changeCSSClass(element) {
if (element.val().length == 0) {
element.addClass('red');
element.removeClass('green');

} else {
element.addClass('green');
element.removeClass('red');
}
}
}
};
}]);

HTML:

<div ng-controller="MainController">
<input float-box type="text" ng-model="message">
</div>

CSS:

.red {
border: 5px solid red;
}

.green {
border: 5px solid green;
}

我想在某些值到达我的文本框后调用 changeCSSClass

请使用pluk进行快速编辑:http://plnkr.co/edit/NTjcV4KDHRVZasoCJz6l?p=preview

基本问题:当我从文本框中模糊时,该事件工作正常。但我想在初始加载本身中显示颜色,即在将模式消息绑定(bind)到文本框之后。这样我就可以获得文本框的长度,并基于此我可以设置 css 类

我不想在所有文本框中使用ng-class并使用范围,而是需要一个通用的实现。

最佳答案

您可以将数据绑定(bind)到指令,并使用 $watch :

指令

(function(){

function directive(){
return {
restrict: 'A',
link: function(scope, element, attr) {
//this is not for validation, this is just a sample for what I want to do.
//Please don't suggest Angular validations

scope.$watch(attr.ngModel, function(){
changeCSSClass(element);
});

function changeCSSClass(data) {
if (data.length == 0) {
element.addClass('red');
element.removeClass('green');
} else {
element.addClass('green');
element.removeClass('red');
}
}
}
};
};

angular
.module('app')
.directive('floatBox', directive);


})();

HTML

<input float-box type="text" ng-model="message">

关于javascript - 将模型绑定(bind)到文本框后调用事件 - Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31795367/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com