Question

我试图在点击时更改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

Answer 1

请使用ng-click和ng-blur 请按照以下代码段进行操作：

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;
    }
}

请根据您的表单进行调整..其工作

Answer 2

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

单击angularJs更改css类

2 个答案: