ng-class

AngularJS | Conditional Class using ng-class

由 可紊 提交于 2019-12-04 05:16:25
问题 I'm wanting to apply a conditional class to an element on the page. Currently it's working with the following code: ng-class="{ 'vfnz-form--error' : loginForm.username.$invalid } This applies a invalid class if the input field is invalid. I'm wanting to apply a " valid" class when the user input field is valid. Is this possible to achieve in the same line of code? Here is a fiddle example: JSFIDDLE 回答1: You could just do it in many ways, one simple way would be to use an object with bracket

ng-class will not trigger on custom directive

由 偶尔善良 提交于 2019-12-04 00:25:04
问题 I am currently developing a slide menu directive for AngularJS. The javascript consists of three types of directives: the directives for each type of sliding menu (for brevity's sake I only included the left sliding menu), one wrapper directive for the rest of the screen, asmWrapper , and one control button directive, asmControl . Currently, all of these directives are using a service, asmService to communicate. When the user clicks an asmControl, that directive's controller calls a method on

AngularJS, difference between ng-class and class with angular expression?

由 柔情痞子 提交于 2019-12-03 22:56:25
What is the difference between the following two code snippets, Code 1: <div class={{getClass()}}/> Code 2: <div ng-class=getClass()/> With the first example before angular loads your class will literally be "{{getClass()}}". While in the second example the div won't have a class until angular runs its first digest. There might be some minor differences with when they are recalculated but Angular will keep both up to date. I've run into issues before using the first method with Animation as ng-class has some hooks into animation. 来源： https://stackoverflow.com/questions/24578501/angularjs

ng-class not being applied

由 安稳与你 提交于 2019-12-03 22:12:11
I have a textarea containing a message to be posted and a span with the number of characters still available. <textarea name="" cols="" rows="" maxLength="{{maxMessageLength}}" ng-model="messageText"/> <div id="chatmessage-buttons"> <a ng-click="sendMessage()"><span>Invia</span></a> <span ng-class="{message-length-alert: (messageText.length > messageLengthAlertTreshold), message-length: true}">{{maxMessageLength - messageText.length}}</span> </div> messageText , maxMessageLength and messageLengthAlertTreshold are all defined in the $scope , and the counter inside the span is updated correctly

Multiple classes in ngClass

由 笑着哭i 提交于 2019-12-03 11:51:19
I'm trying to add multiple values in *ngClass, what used to work on previous alpha releases and doesn't seem to work now on angular2 beta: <i *ngClass="['fa','fa-star']"></i> It produces an error: EXCEPTION: TypeError: Cannot read property 'add' of undefined in [['fa','fa-star'] in PostView@30:27] What am I missing here? You should use square brackets to create property binding. See this plunk <i [ngClass]="['fa','fa-star']"></i> If you aren't going to be changing these classes dynamically then using ngClass is overkill. You can simply use class="fa fa-star" in your template. ngClass should be

Adding class to an element on its click event

由 落爺英雄遲暮 提交于 2019-12-03 10:58:42
问题 I am new to Angular Js. I need to add a class to an element on its click event. I tried the following code. But it is not working. <html> <head> <style> .active{color:red;} </style> <script src="js/lib/jquery.min.js"></script> <script src="js/lib/angular.min.js"></script> </head> <body ng-app="MyApp" ng-controller="MyController"> <div ng-repeat="data in datas"> <p ng-click='selectMe()'>{{data.name}}</p> </div> <script> var app = angular.module('MyApp',[]); app.controller('MyController'

AngularJS ng-class multiple conditions with OR operator

由 ⅰ亾dé卋堺 提交于 2019-12-03 04:48:24
I try to find out the good syntax for adding classes depending on angular values. I want to activate a class regarding 2 conditions (one on live user changes, and one on loading datas) with a OR operator. Here is the line : <a href="" ng-click="addFavorite(myfav.id);favorite=!favorite"> <i class="fa orange" ng-class="{'fa-star': (favorite || (fav==myfav.id)), 'fa-star-o': !favorite}"></i> </a> I tried some different codes like this one : ng-class="{'fa-star': favorite, 'fa-star': (fav==myfav.id), 'fa-star-o': !favorite}" without any success. Can someone help me finding the good syntax ? Try

Adding class to an element on its click event

由 喜欢而已 提交于 2019-12-03 01:41:23
I am new to Angular Js. I need to add a class to an element on its click event. I tried the following code. But it is not working. <html> <head> <style> .active{color:red;} </style> <script src="js/lib/jquery.min.js"></script> <script src="js/lib/angular.min.js"></script> </head> <body ng-app="MyApp" ng-controller="MyController"> <div ng-repeat="data in datas"> <p ng-click='selectMe()'>{{data.name}}</p> </div> <script> var app = angular.module('MyApp',[]); app.controller('MyController',function($scope){ $scope.datas = [{name:"first"},{name:"second"}]; $scope.selectMe = function (){ $(this)

Complex angular js ng-class

由 匿名 (未验证) 提交于 2019-12-03 01:05:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have the component and have a problem setting the css class to it. I want it to always have a class of "box", then to have additional classes specified by the directive "class" argument and one conditional class "mini". Conceptually what I want to achieve is something like this: ... The problem is that when I set the class html attribute, the ng-class attribute is omitted. How to make my example work without changing the controller? Is it even possible, or should I set the class in the controller instead (which I wish to avoid)? 回答1: I

add/remove class of multiple li in angularjs

由 邮差的信 提交于 2019-12-02 23:09:51
问题 I have list as below... <ul id="menu"> <li>one</li> <li>two</li> <li>three</li> </ul> Now, when a particular li is clicked, I want the active class to be added to the same and remove active class from the rest of the li elements. Also, when the same li is clicked again I want to remove active class. How, can i do this using ng-click and ng-class ? 回答1: Check the below example: var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', ['$scope', function($scope) { $scope.setMaster =
订阅 ng-class