在angularJs中单击更改css类

change css class on click in angularJs

本文关键字：css 单击 angularJs      更新时间：2024-03-06

我试图在单击时更改div元素的CSS类。下面是我正在尝试的代码。默认情况下，"input large"应处于活动状态。"input large input active"应在单击用户名时变为活动，在单击其他地方时变为非活动。

<div class="input-large">
    <label class="input-label">Username</label>
    <input class="input-field" type="text">
</div>
<div class="input-large input-active">
            <label class="input-label">Username</label>
            <input class="input-field" type="text">
</div>

请让我知道如何在点击

时更改div

请使用ng点击和ng模糊遵循中的代码段：

http://jsfiddle.net/atXAC/11/

<div ng-controller="MyCtrl">
<div ng-class="{'active':hasFocus==true,'inactive':hasFocus==false}">Enter your Name here</div>
<input type="text" ng-model="user.name" ng-click="hasFocus=true" ng-customblur="onBlur()" required id="name"/>
</div>

这是你的js

var myApp = angular.module('myApp', []);
myApp.directive('ngCustomblur', ['$parse', function($parse) {
  return function(scope, element, attr) {
    var fn = $parse(attr['ngCustomblur']);      
    element.bind('blur', function(event) {        
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  }
}]);
function MyCtrl($scope) {
    $scope.onBlur = function(){        
        $scope.hasFocus = false;
    }
}

请根据您的表单进行调整。它的工作

另一种方法可以是在控制器的onClick处理程序中附加css类。

相关文章：