我试图在获得焦点时将类添加到输入的父级。我可以获取父项,但似乎无法设置类名。这是我在这个plunkr中尝试的方法:
http://plnkr.co/edit/eEfSeDb7i3uujjBZt21z?p=preview
<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<link rel="stylesheet" href="http://nervgh.github.io/css/animate.min.css" />
<style>
.highlight {
border: 2px solid red;
}
.blue-border
{
border:2px solid blue;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script>
angular.module( 'app', [])
.run( function( $rootScope, $timeout ) {
$rootScope.focusInput= function($event )
{
angular.element($event.target).parent().className += " " + 'highlight';
console.log( angular.element($event.target).parent() );
};
$rootScope.blurInput= function($event )
{
angular.element($event.target).parent().className.replace(' highlight', '');
};
});
</script>
</head>
<body>
<div class="blue-border">
<input ng-focus="focusInput($event)" ng-blur="blurInput($event)" value="Lactobacillus acidophilus"/>
</div>
</body>
</html>
注意它如何成功记录父级。但是,边框不会变成红色!还有其他的“角度”方式吗?
Angular的JQLite为此提供了'addClass'和'removeClass'函数:
angular.element($event.target).parent().addClass('highlight');
请参阅此处的文档:https : //docs.angularjs.org/api/ng/function/angular.element
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句