angularjs,angularjs-ng-click,ng-class
Try toggling instead of going for $index, use productDisplay = !productDisplay this will change the ng-class expression and apply hide class whenever it gets clicked, or more better code you can use ng-if/ng-show/ng-hide instead of using ng-class. HTML <div ng-repeat="product in project.data track by $index"> <p ng-click="productDisplay = !productDisplay"><strong>{{product.name}}</strong></p> <div...
angularjs,angularjs-ng-click,ng-class
use ng-class.don't use any javascript function to set css. <button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);clicked=true;" ng-class="{btn-primary:clicked}" type="button">{{combination.name}} </button> or you can use best approach: <button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}"...
angularjs,onclick,ng-class,onhover
There's a short but worthy blog post about this issue here. It suggests using a strategy similar to the following for mouseover/hover events... <div id="divID" ng-init="imgsrc='/images/twitter_blue.png'" ng-mouseover="imgsrc='/images/twitter_brown.png'" ng-mouseout="imgsrc='/images/twitter_blue.png'"> <img ng-src="{{imgsrc}}"/> <div>Image description</div> </div> Additionally, you could use ng-click to manage changes in ng-src for click events <div id="divID" ng-click="updateImageSrc()" ......
javascript,angularjs,angularjs-ng-click,ng-class
You need to remove the class from the first li and instead set the toggleObject to 1 in the controller. function HolaCtrl($scope){ $scope.toggleObject = 1; } <li data-ng-class="{'active' : toggleObject == 1}" data-ng-click="toggleObject = 1">a click 1<br> </li> <li data-ng-class="{'active' : toggleObject == 2}" data-ng-click="toggleObject = 2">a click 2 <br>...
angularjs,angularjs-directive,ng-class
you have added the ng-model="style" in input. So what ever you type in the input that will become the class for the 'p' tag because ng-class="style". check this fiddle http://jsfiddle.net/devjit/wdtk370z/4/ And Type 'style', 'style1', 'style2' in the input field. you will understand what is happening. <div ng-app> <p ng-class="style">Using String...
The problem was that I forgot to set this to ctrl inside the controller.
javascript,angularjs,angularjs-scope,ng-class
Here you are: ng-class="myForm.input.$valid ? 'valid' : 'invalid'" ng-class checks whether the input is valid or invalid and returns two corresponding classes for .valid and .invalid. While then you can apply styles with CSS: .valid { background: green; } .invalid { background: blue; } The HTML should be something like...
css,angularjs,ng-repeat,ng-class
Here's a directive that calculates all of the indices of adjacent cells and adds the adjacent class using jQuery only ... not ng-class. Assumes that rows will wrap , would need adjusting for individual row elements .directive('activityThumb', function() { return { restrict: 'C', link: function(scope, elem) { elem.bind('mouseenter', function(e) {...
javascript,angularjs,ng-class,ng-show
In first case ng-class evaluate you expression as true because in JavaScript Array is an instance of Object. It checks if your Adate.Adates exists and returns true Just try: if ( Adate.Adates ) { // this code will execute when your Adates has an empty array } You can fix...
angularjs,angularjs-directive,ng-class
ng-bind-html will not work because you got directives and interpolation in your html. Angulars ngBindHtml directive is used for plain html only. In your ssHeader directive you need to compile the header string. Something like so will do the trick. angular.module('MyApp', []) .controller('MyController', ['$scope', function($scope) { $scope.showHeader = true; $scope.smallHeader...
I would at least take that logic out of the HTML and use a simple function on the controller: <div class="col-md-1" ng-controller="MyCtrl"> <i class="float-right" ng-class="onlineClass(activeAssignments)"></i> </div> and on the controller $scope.onlineClass = function(a) { return (a > 0) ? 'user-online' : 'user-offline'; }; ...
javascript,angularjs,angularjs-directive,ng-class
First of all active is in an isolate scope, so ng-class has no access to it. Secondly, and more importantly, ng-class is added after the directives of the element have been collected by angular. It's too late. There's no reason to use ng-class if you have your own directive. slideMenu.directive('asmSlideLeft',...
javascript,angularjs,angularjs-ng-repeat,ng-class
You're not removing the glyphicon-chevron-down class when you click on the element. You end up with an element that has both classes ; whatever CSS rule comes last will be applied. Try this : <i class="pull-right glyphicon " ng-class="{'glyphicon-chevron-up': $index == state.selected, 'glyphicon-chevron-down': $index != state.selected }"></i> Here is a...
javascript,angularjs,angularjs-scope,angular-directive,ng-class
So, the only way i have been able to achieve the expected outcome is through: app.controller('MyController', function($scope) { $scope.checkUsr = function() { var myEl = angular.element( document.querySelector( '#username' ) ); var angElement = angular.element(myEl); angElement.addClass('neccessary'); } }); This feels like a really old way of adding a class, and really...
When you want to modify a variable of your parent scope from within a ng-repeat you need to use $parent.currentTab. Updated Fiddle...
Why a function? I believe you can achieve the same thing using this: <tag ng-class="{smalltext: inProgressCounter > 999, defaulttext: inProgressCounter <= 999}"></tag> If you want to use a function, you don't need ng-class: <tag class="foo bar {{numclass(inProgressCounter)}}"></tag> ...
javascript,angularjs,angularjs-directive,ng-class,angularjs-ng-class
You could get the element has active class or not using $watch functino on scope, the function return in $watch first part will get evaluated everytime when digest cycle run & then you will get either true or false value on the basis of element.hasClasss('active') Directive directive('activeCollapsible', function() { return...
angularjs,angularjs-directive,ng-class
I was doing some syntax error. We can simply resolve this <ul> <li ng-click="expression= 'created_at'" ng-class= "latest_icon : expression == 'created_at'">Latest </li> <li ng-click="expression= 'popularity'" ng-class= "popular_icon : expression == 'popularity'">Latest </li> </ul> Here latest_icon and popular_icon are classes name which activate according to selected list. ...
If you want multiple conditions the syntax is: ng-class=" {className: valueToCheckForTruthiness, otherClassName: otherValue } " Example using your class names: ng-class="{side_menu_link_active: isSelected, side_menu_link_disabled: !isSelected, link_active: pageSelected == 'lectures', link_disabled: pageSelected != 'lectures' }" You can take this further and generate an object using a function: $scope.classGenerator = function(isSelected, pageSelected){ var...
javascript,css,angularjs,ng-class
Right now there is a single clicked property on the scope that you're changing and everything refers to that. Try to put clicked on the node instead... $scope.toggleMe = function(node) { if ($scope.count > 0) { angular.forEach($scope.cityArr, function(value) { if (node.city === value) { node.clicked = false; } else {...
Please see here http://jsfiddle.net/e9pr4yqj/ Yours ParseSavedExercises contains string and id is number so no id existed in ParseSavedExercises $scope.ParseSavedExercises = ['2','3']; change to $scope.ParseSavedExercises = [2,3]; or use ng-class="{'approved': ParseSavedExercises.indexOf(exercise.id.toString()) == -1}" like here http://jsfiddle.net/1ujgvL80/...
ng-class can take array itself so provided Tags is a property of the scope you could do:- <article ng-class="Tags"></article> ng-class Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the...
You could just do it in many ways, one simple way would be to use an object with bracket notation. Example:- ng-class="{ true: 'vfnz-form--error', false : 'vfnz-form--good' }[loginForm.username.$invalid]" Or (since it cannot be both invalid and valid):- ng-class="{'vfnz-form--error' : loginForm.username.$invalid, 'vfnz-form--good' : loginForm.username.$valid}" And if you want to do it...
but using this when the page loads all checkboxes have disabled class. This is due to the fact that on page load, all $index values are different than currentid, which you only set after a click. You need to make sure you have a checked checkbox: $scope.showOptions = function...
javascript,css,angularjs,twitter-bootstrap,ng-class
You can change the rule to a more specific one using specificity rules .table-striped > tbody > tr.red td, .red { background-color: #ff0000; } Demo: Fiddle...
javascript,angularjs,ternary-operator,ng-class
you should use two input elements in this case. Like <input ng-if="isReturnAddress" type="text" class="form-control" ng-model="address"> <input ng-if="!isReturnAddress" type="text" class="form-control"> and in your controller, please check if($scope.isReturnAddress){ var address = $scope.address; } See working fiddle here...
I believe you're asking for ng-class. you need to set a variable to represent 'is_active', and use it in your html like so: <i class="btn fa" ng-class="{'fa-toggle-on isActive' : is_active, 'fa-toggle-off isInactive' : !is_active}"></i> ...
javascript,angularjs,angularjs-ng-repeat,ng-class
give your input a value and change the model value to point to the same model since it's a radio button and data needs to be exclusive <input type="radio" name="modelGroup" ng-model="selected.value" value="{{$index}}"> change your ng-class to ng-class="{hilite : selected.value == $index}" Also make sure you create the variable in your...
Using ng-class should work. <td ng-repeat="col in row track by $index" ng-class='getUnitCountCellColor(col)'>{{col}}</td> Here's a demo where I color all the zeros red. Update So you table is in a directive, and the cell-color method is in the controller. You can pass the getUnitCountCellColor function into the directive. <count-table table-type='tableType' get-unit-count-cell-color='getUnitCountCellColor(col)'>...
javascript,html,css,angularjs,ng-class
Remove the double curly braces {{}}. ng-class expects an expression. <li><a ng-class="m['CAD_Usuario'].style"> ...
javascript,angularjs,angularjs-ng-click,ng-class
Add a condition to ng-click expression: <button class="someClass" ng-class="{true: 'green', false: 'blue'}[!yupNope.isSelected]" ng-click="yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">YES</button> <button class="someClass" ng-class="{false: 'green', true: 'yupNope'}[!yupNope.isSelected]" ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">NO</button> Your modified plunkr....
angularjs,conditional,ng-class
You could probably do like this : ng-class="[(task.completed && 'card--done') , task.color]" if task.completed is falsy it will add class name "false" to the element but it should be harmless. Problem is when you provide an array it will use the string representation of every item in the array, so...
Since the changes to nav are made outside of the Angular context (from the event listener callback for window's scroll event), you need to manually call scope.$apply() at the end of the callback. .bind('scroll', function (evt) { ... scope.$apply(); }); See, also, this short demo....
javascript,angularjs,twitter-bootstrap,angularjs-scope,ng-class
The syntax is wrong on the template. It should be: <li role="presentation" ng-class="{'active': path==='/'}"><a ng-href="#/">Home</a></li> And as style guide try using the === instead of the simple == because of type coercion. Or test agains truthy or falsy...
Pass the getCellColor method to the directive like this: <count-table table-type='tableType' get-cell-color='getCellColor(col)'> </count-table> The directive looks like this: app.directive('countTable', function(){ return { restrict: 'E', scope: { tableType:'=tableType', getCellColor: '&' }, templateUrl: 'table.html' }; }); The directive template looks like this: <table> <tr ng-repeat="row in tableType.data.rows"> <td ng-repeat="col in row track...
Angular binding is using $watch to monitor changes in the function value. The digest cycle is calling your function to compare the result with last value. This article is nice explaining this http://tutorials.jenkov.com/angularjs/watch-digest-apply.html#watch I suggest binding to scope variables instead of functions. i.e. have a variable in the scope that...
you can toggle the value of MYWIDTH by doing this <button ng-click="MYWIDTH = !MYWIDTH">Wide</button> ...
angularjs,angularjs-scope,ng-class
You can try: ng-class="{ 'active' : question.chosen.indexOf(key) >= 0 }" ...
In short, { {{user.genre}}: true} is not a correct angularjs expression For your solution, try ng-class="getClass(user.genre)" and do whatever you want in getClass function example...
Save the filtered result: <div ng-repeat="item in filteredItems = ( todo.items | filter:categoryFilterFn)"> Move selectedCategory to $scope: $scope.selectedCategory = null; $scope.selectCategory = function(newCategory) { $scope.selectedCategory = newCategory; } Use ng-class on the buttons: ng-class="{ 'no-result': selectedCategory === letter && !filteredItems.length }" Demo: http://plnkr.co/edit/Gl1i4dLyCCwuorQHB5SS?p=preview...
angularjs,angularjs-ng-repeat,ng-class
After much troubleshooting, I came up with the following solution (extending @tasseKATT's original answer: <td ng-class="{true: [row[th], 'staticCSSClassName']}[$last]" ng-repeat="th in ths">{{row[th]}}</td> The code above adds two classes to the last <td> in ng-repeat: value contained in row[th] staticCSSClassName So, basically, the value part in the Object can be an array...
So, it looks like your server is returning the boolean values as strings, that's why your bindings don't work... You can either change your server's return values (preferred) or add ng-true-value and ng-false-value to your check box and keep the binding on ng-class using the string comparison: <ul id="todo-list"> <li...
angularjs,angularjs-ng-click,ng-class
The way you have implemented it (which doesn't make much sense btw), you need to register a listener for the click event on the window object (and because we are in Angular we should use the $window service). Every time the window object receives the click event it should reset...
javascript,angularjs,expression,directive,ng-class
I've got two solutions in my mind : See them working in this plunker First : in HTML <div class="aclass {{A}}" ng-class="{'two': B, 'three': C}"></div> Second : With a function <div class="aclass" ng-class="getClasses()"></div> And in your controller $scope.A = 'one'; $scope.B = true; $scope.C = false; $scope.getClasses = function(){ var...
Try this ng-class="{'margin-watch': (progress <= 0), 'margin-continue-watch': (progress > 0) } ...
For one, you don't need to "override" the class you can have only one. Anyhow, the problem is that you are returning a value from a Promise, and it's meaningless. Also, you have to associate the status of the request with the loop iterator so first change the markup to...
You should'nt use an expression inside a ng-attribute like that. And it will fail (without or without the state object) : Error: [$parse:syntax] Syntax Error: Token '?' not a primary expression at column 2 of the expression [ ? 'on' : 'off'] starting at [? 'on' : 'off']. That's normal...
You forgot ' ' ng-class="{'completed': todo.isCompleted==true}" ...
angularjs,controller,factory,angular-services,ng-class
The $scope of the controller you're attaching the value to doesn't extend to the <body> element. Instead, you can whip together a directive: .directive('shouldScroll', function (Scroll) { return { restrict: 'A', link: function ($scope, elem) { $scope.$watch(Scroll.isScrollingEnabled, function (n) { if (n) { elem.addClass('scrolling'); } else if (n === false)...
css,angularjs,angularjs-ng-click,ng-class
Use ng-class and set the condition: <li ng-class="{'active' : catalog.selected == ''}" ng-click="catalog.selected = ''">ALL</li> <li ng-class="{'active' : catalog.selected == 'uno'}" ng-click="catalog.selected = 'uno'">UC</li> <li ng-class="{'active' : catalog.selected == 'dos'}" ng-click="catalog.selected = 'dos'">CEM</li> <li ng-class="{'active' : catalog.selected == 'cuatro'}" ng-click="catalog.selected = 'cuatro'">SMB</li> <li ng-class="{'active' : catalog.selected == 'cinco'}"...
You have some other issue. The following, with multiple conditions, works: <input ng-model="highlightEven" type="checkbox"> <div ng-repeat="item in ['a', 'b', 'c', 'd']" ng-class="{even: $index % 2 === 0 && highlightEven}">{{item}}</div> plunker...