ng-class

Angularjs - How to change background color using radio button

由 泪湿孤枕 提交于 2019-12-11 09:41:59
问题 On my page, I have dynamically created radio buttons. I want to change wrapper background color when radio button is selected. following is my code <section ng-repeat="list in myList"> <div class="radioWrapper"> <input type="radio" name="{{list.category}}" ng-model="list.name"> <label>{{list.name}} </label> </div> </section> I want to add "selectedRadioBg" class at the radioWrapper when each radio is selected. Appreciate any help 回答1: <section ng-repeat="list in myList"> <div ng-class=

AngularJS: How to not lose focus on element if other elements are clicked (using ng-focus/ng-blur)?

由 有些话、适合烂在心里 提交于 2019-12-11 05:14:15
问题 I've got some elements inside an ng-repeat loop that have these attributes: <div ng-repeat="h in myObjectArray"> <div> <input ng-class="{ clicked: clickedFlag1 }" ng-focus="clickedFlag1 = true" ng-blur="clickedFlag1 = false" type="button" id="1" value="1" ng-click="btnSelected(1)" /> </div> <div> <input ng-class="{ clicked: clickedFlag2 }" ng-focus="clickedFlag2 = true" ng-blur="clickedFlag2 = false" type="button" id="2" value="2" ng-click="btnSelected(2)" /> </div> </div> What happens is

Angular ngClass is not updating my classes even though my condition change as expected

由 喜你入骨 提交于 2019-12-11 02:39:55
问题 I have something like this in a template I am creating <div ui-view id="app" class="nng-3" ng-class="{ 'app-mobile': app.isMobile, 'app-navbar-fixed': app.layout.isNavbarFixed, 'app-sidebar-fixed': app.layout.isSidebarFixed, 'app-sidebar-closed': app.layout.isSidebarClosed, 'app-footer-fixed': app.layout.isFooterFixed }"></div> The values app.layout.isNavbarFixed , etc are initialized with either zero or one, and for the first time the page loads the appropriate classes are inserted into my

angularjs ng-class not working when expression = array with object and string

由 夙愿已清 提交于 2019-12-10 23:36:25
问题 I don't know if it's now for the sake of it, but i am stuck with a statement in the AngularJS documentation: https://docs.angularjs.org/api/ng/directive/ngClass "... If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear..." "...<p ng-class="[style4, {orange: warning}]">Using Array and Map

ngClass or class=“{{}}”?

由 半世苍凉 提交于 2019-12-10 22:18:25
问题 Just curious if there are any bigger advantages on any of these approaches? <div class="small" ngClass="well-{{small}}">small</div> or <div class="small" class="well-{{big}}">big</div> 回答1: The way you are using ngClass it does not matter. Although, ngClass allows us to conditionally add classes, i.e. <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> when using class , you will have something like: <some-element [class]="someExpression ? 'first' : ''

Angular2 Exception: ngClass within a Host, “isn't a known native property”

由 淺唱寂寞╮ 提交于 2019-12-10 16:00:35
问题 Is it possible to use "ngClass" within the host for a component/directive. @Component({ selector: 'custom', template: `<div [ngClass]="classMap"></div> // I work <ng-content></ng-content>`, host: { '[ngClass]' : 'classMap' // I don't work!!! } }) export class CustomComponent { constructor () { this.classMap = { custom: true }; } } In the above example the ngClass works correctly on the div in the template.. it get's a "custom" class added, but it throws an exception when trying to add via to

Class directive not working when using ng-class to load the directive

由 戏子无情 提交于 2019-12-10 14:49:41
问题 I am trying to load a 'class' directive using ng-class. but my directive is never loaded when i do that. The directive is a multipurpose directive, and I don't want to create an isolated scope on this. it will be loaded only when required, based on ng-class conditions hence not using attribute or element directive. has anyone tried doing this and succeeded? this directive is called using <div ng-class="someClass {{tooltip: enabled}}"></div> here enabled is a scope variable. app.directive(

Condition in ng- class not working

由 最后都变了- 提交于 2019-12-08 21:24:30
AngularJS I have scenario of applying class based on a condition in which I'm storing the value in rootscope dynamically and evaluating in html angular expression but still not working <li role="presentation" style="width:200px" ng-class="{active: true, inactive: false}[{{vm.$rootScope.currentPage}}==1]"><a href="#/create">Create</a></li> In inspect element if I check I can see 1==1 but still class is not getting active and if I remove {{vm.$rootScope.currentPage}} and place 1 it is working I tried this also <li role="presentation" style="width:200px" ng-class="{'active':2=={{vm.$rootScope

Adding multiple expressions using ng-class in AngularJS

由 China☆狼群 提交于 2019-12-08 05:08:06
问题 I am trying to set the class .active when the path is http://localhost/#/ or http://localhost/#/main/ as both paths are the same page. Why does ng-class="{'class1' : expression1, 'class1' : expression2}" not work? Controller angular.module('testApp') .controller('NavmenuCtrl', function ($scope, $location) { $scope.isActive = function (providedPath) { return providedPath === $location.path(); }; }); Partials View <li ng-class="{ active: isActive('/'), active: isActive('/main/')}"> <a href="#/"

Add classes to adjacent elements dynamically on mouseenter

由 女生的网名这么多〃 提交于 2019-12-08 03:39:41
问题 I'm creating a grid of elements and have a hover effect in place, using CSS transitions, for each element. I'd like to add secondary effects on adjacent x- and y-axis elements as well, creating a cloud effect. I imagine I'll be referencing those elements using jQuery's next() and prev() methods, or by $index and $parent.$index. The grid area will be large enough to prevent row-wrapping (using negative margins and hidden overflow). Here's a simplified example of my repeat: <div class="activity
订阅 ng-class