在angularJs中单击更改css类答案

【问题标题】：change css class on click in angularJs在angularJs中单击更改css类
【发布时间】：2016-04-08 13:07:52
【问题描述】：

我正在尝试在单击时更改 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

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

请使用 ng-click 和 ng-blur 按照sn-p :

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

请根据您的形式调整它......它的工作原理

【讨论】：

嗨 Ankur，我刚刚看到小提琴中使用的角度版本是 1.0.3。我正在使用 1.4.8，但无法在 1.4.8 中使用相同的代码。您能告诉我如何将此代码升级到 1.4.8 吗？

【解决方案2】：

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

【讨论】：