Recently, I've been experimenting with Angular and found myself facing a dilemma. Is it possible to apply a different CSS style based on whether the value of ng-model is greater than 0?
`<span ng-model="users2" ng-hide="!myVar" ng-class="{'test2': users2 > 0}" style="font-size:28px; color:purple" >`
I would greatly appreciate any assistance on this matter. Thank you!
You executed all the steps correctly.
Check out this JSBin for reference
Additionally, take a look at the ngClass Documentation for more examples.
If it's still not functioning, there may be another underlying issue.
Edit:
I missed an important detail, as mentioned in the feedback, the ngModel directive binds specific elements to a scope property like inputs, selects, textareas, or custom form controls. This directive does not have any effect on spans as they are not defined.
To modify the CSS style of a span based on a variable value, utilize the ng-class directive. You have the option to incorporate an if-else statement like so:
<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">
When it comes to styling, inline styles take precedence over css classes.
If you find that adding !important to your class is necessary for the desired effect, go ahead and do so. However, I recommend avoiding inline styles altogether and utilizing ng-class instead.
Feel free to check out the demo below or visit this fiddle.
angular.module('demoApp', [])
.controller('mainController', MainController);
function MainController() {
var vm = this;
angular.extend(vm, {
myVar: true,
users2: 1
});
}.test2 {
color: red !important;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
<input ng-model="ctrl.users2"/>
<span ng-hide="!ctrl.myVar" style="font-size:28px; color:purple" ng-class="{'test2': ctrl.users2 > 0}">
some content
</span>
</div>ng-model is specifically designed to work with input boxes, text boxes, radio buttons, and check boxes. If you try to use ng-model on a span element, it will not be able to update the model itself.
This means that $scope.users2 will always be undefined in this scenario.
Trying to customize the background of a datetime picker created using jquery.pttimeselect.js. Despite linking the correct css file (jquery.pttimeselect.css), I am unable to change the background color. Any suggestions on how to successfully modify the ba ...
My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...
When working on a form design, I encountered an issue where the text labels were not aligning to the same width. Despite setting the width, it didn't seem to work as expected: .form-label { display:inline; width: 160px; } <div class="form-label ...
Below is the HTML content: <div class="wrapper"> <figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>RESPONSIVE HTML5 WEBSITE FOR <br> OR LEDS COMPANY</span></fig ...
I'm facing a challenge where I have a global variable that needs to be updated after an HTTP GET call. Once updated, I then need to pass this updated variable to another function. I'm struggling to figure out the best approach for achieving this. ...
On my webpage, I have a paragraph system (parsys) with a component that contains two inner paragraph systems. When I try to add a rich text component to each of these inner paragraph systems, the components overlap and become uneditable. Is it possible t ...
Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. ...
Searching for a regular expression to validate US zip codes. I have come across multiple examples, but none of them cater to the scenario where the zip code is optional. The input field I am working on does not require a zip code, so it should accept a 5 ...
I am currently developing an app using angularjs and typescript, but I've encountered a persistent error that has me stumped. Below is the snippet of my code: export var NgApp = new application.Startup(); ///<reference path="../../../../../typin ...
When using selenium, I have a web element that I want to select. The WebElement.IsDisplayed() method returns true, but I am unable to perform the webelement.click() operation. port_dimension = canvas.find( By.xpath( "//*[local-name() = 'rect'][ ...
Showing different inputs based on an array looks like this <div data-ng-repeat="n in langInput.values"> <input type="text" id="auction_name_{{n.selected}}" class="form-control" name="auction_name_{{$index}}" ...
Can a sticky footer with a transparent background be achieved without a content background (.wrapper) underneath it? I found this resource: ...
As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...
My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...
As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges: 1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' a ...
Trying to convey this as clearly as possible. I have the variables below: $name = main channel and $childs = sub channels. When I remove the childs from the HTML, only the main channel shows up - which is expected. However, when attempting to style the su ...
I'm attempting to create a canvas line diagonally above two textboxes that are also positioned diagonally (similar to Samsung's pattern passcode) when a button is clicked, but I am facing difficulties in achieving this. I have attempted to solve ...
As a beginner in using iframes, I have come across an issue that is puzzling me. I have a navigation bar and an iframe on my webpage. When I click on the "Search" link, it loads into the iframe without any problems and I can work within it. However, if I c ...
Here is the code for my Controller: (function () { 'use strict'; angular.module('myApp').controller('myCtrl', function ($scope, myService) { // Start -----> Service call: Get Initial Data myService ...
<select class="form_control" id="district" name="district" multiple ng-model="$scope.district"> <option value="{{tp_id}}" ng-repeat="tp_id in district" >{{tp_id}} </option> </select> I am facing an issue where no v ...