Change text color dynamically AngularJS - javascript

I struggle thinking "The Angular Way" so this is undoubtedly a simple problem, but I'm trying to have it so when I click a button (which will eventually be colored) the text changes to that color. Here is essentially the code:
JS
var myApp = angular.module('myApp', []);
myApp.controller('ColorCtrl', ['$scope', function($scope){
$scope.changeColor = function(value){
return {"color:" value };
}
$scope.turnGreen = function (){
//what to do here?
}
$scope.turnBlue = function() {
//and here?
}
}]);
HTML
<div ng-app="myApp" ng-controller="ColorCtrl">
<button ng-click="turnBlue()">Make text blue</button>
<button ng-click="turnGreen()">Make text green</button>
<p ng-style="changeColor(value)">I should be either green or blue!</p>
</div>
I know I could easily use jQuery to select the text I want to work with, but I don't want to do that. Do i need to give my paragraph a model? Any push in the right direction is greatly appreciated - thank you.

You could do this way:
Define ng-class directive and value as colorClass which will be set in the scope.
<p ng-class="customStyle.colorClass">I should be either green or blue!</p>
and do:
$scope.customStyle = {};
$scope.turnGreen = function (){
$scope.customStyle.colorClass = "green";
}
$scope.turnBlue = function() {
$scope.customStyle.colorClass = "blue";
}
and some rules:
.green{
color:green;
}
.blue{
color:blue;
}
or with inline style
<p ng-style="customStyle.style">I should be either green or blue!</p>
and
$scope.customStyle = {};
$scope.turnGreen = function (){
//what to do here?
$scope.customStyle.style = {"color":"green"};
}
$scope.turnBlue = function() {
$scope.customStyle.style = {"color":"blue"};
}

Related

how to change classes of html elements obtained from ng-click()

I have an html element as :
<i ng-click="run()"></i>
and in my controller:
$scope.run() = function($event) {
var el = $event.currentTarget;
}
now how can i want to add some classes on the el element but el.addClass('class-name') is not working
I can only use javascript here not jquery
ng-class="expression"
Its recommended that you use ng-class instead of using controller to add class.
but you can use element.classList.add('className') also if you want
When modifying classes on elements using the classList API you need to use the classList namespace. i.e.
el.classList.add('class-name');
It looks like you are still thinking in jQuery.
html:
<i ng-click="run($event)"></i>
JS:
$scope.run() = function(event) {
var element = angular.element(event.currentTarget);
element.addClass('new');
}
You can use ng-class here is the demo Jsfiddle demo
Js code
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.myClass = false;
$scope.addClass = function() {
$scope.myClass = true;
}
});
HTML
<div ng-app="app">
<div ng-controller='ctrl'>
<span ng-class='{myClass:myClass}'>This my content</span>
<button ng-click='addClass()'>
Add class
</button>
</div>
</div>
I think a more propriate way to do it, is to use ng-class for your i element, and bind it to some variable on your scope.
Example:
Your HTML:
<i ng-click="changeClass()" ng-class="myClass"></i>
Your Angular controller:
function Controller($scope){
$scope.myClass = "";
$scope.changeClass = function() {
$scope.myClass = //Put here your CSS class
}
}
You can use ng-class in Angular js
<i ng-class="myclass" ng-click="run()"></i>
in controller
$scope.run() = function(event) {
$scope.myclass="classname";
}
Simply add like this,in HTML
<i ng-click="run($event)">i</i>
In contoller
$scope.run = function($event) {
$event.target.classList.add("className")
}

Get the background color of div - AngularJs?

I want to get the background color of a DIV element when I click on that div.
HTML -
<div style="background-color:red" ng-click="getFilter($event)" class="agenda col-md-4">ABCDEGF/div>
JS Controller -
$scope.getFilter = function(event){
};
If we do in in jQuery, It would have been done as -
$('div').click(function(){
$color = $(this).css('background-color');
});
But I want to do with angularJs. Someone help ?
you can use:
$scope.getFilter = function(event) {
$scope.color = $(event.currentTarget).css('background-color');
};
You could use ng-style for setting color dynamically, I'd just have it inside the API response for each record. I assumed that you are rendering all the elements using ng-repeat directive.
Markup
<div ng-repeat="item in items"
ng-style="{'background-color': item.color}"
ng-click="getFilter(item);"
class="agenda col-md-4">
ABCDEGF
</div>
Code
$scope.getFilter = function(item){
$color = item.color;
}
Created sample example with service to get and assign color dynamically. JSFiddle - https://jsfiddle.net/q16fcq99/
Modify the service with your required call. Hope this will help.
<body ng-app="SampleApp">
<div ng-controller="fcController">
<div ng-style="{'background-color': divColor}" ng-click="getFilter($event);" class="agenda col-md-4">
ABCDEGF
</div>
</div>
</body>
var sampleApp = angular.module("SampleApp", []);
sampleApp.controller('fcController', function($scope, colorService) {
$scope.divColor = 'red';
$scope.getFilter = function(event) {
$scope.divColor = colorService.getColor();
console.log('Event Fired');
};
});
sampleApp.service('colorService', function() {
this.getColor = function() {
return "blue"; //Call Actual Service to Get Color
};
});

AngularJS changing class without ng-class

I'm looking to enable users to change the class from incomplete to complete on button click when function(response) returns 1. I have tried using issues, however; It doesn't work well as the HTML elements are loaded with a PHP loop so an ng-class expression doesn't work. This is because an if statement is run checking if it is incomplete or complete while the AngularJS expression wouldn't be able to check the database in this sense.
I added the 'active' variable, but I cant seem to put this into play without ng-class. Is there an alternative to jQuery's class add/remove? Or can someone think of another solution.
HTML:
<div class='task col-md-4 incomplete'>
<button data-ng-click='toggleTask(".$lesson_id.", 0)' class='btn btn-default'>Mark as complete</b></button>
</div>
AngularJS:
var app = angular.module('training-center', []);
app.controller('task-manager', function(\$scope, \$http) {\
$scope.toggleTask = function(id, active) {\
$scope.id = id;\
$http.post('app/modules/Controller.php?action=toggleTask', {
task_id: id,
active: active
}).
then(function(response) {
if (response.data == '1') {
//What do I place here?
}
},
function(response) {
});
};
});
You do not have to use ng-class - you can use regular class and put a parameter in it with {{}}. Then just change the variable in the $scope, and it will automatically adapt its behaviour.
Here is an example:
<div ng-app>
<div ng-controller="testCtrl">
<div id="test" class="{{className}}">
{{className}}
</div>
Click
</div>
</div>
And the controller code (it's ugly, but you'll get the point):
function testCtrl($scope) {
$scope.className = "red";
$scope.increase = function() {
if($scope.className == "red")
$scope.className = "blue";
else if($scope.className == "blue")
$scope.className = "green";
else if($scope.className == "green")
$scope.className = "red";
}
}
(Of course, classes are trivial):
.red { color: #FF0000; }
.blue { color: #0000FF;}
.green { color: #00FF00;}
This works just fine for me. I have not tested it out in an environment where the body of the page is generated by PHP, but should not make a difference.

How can I create an underline filter with AngularJS?

I'm trying to make a filter so I can underline a specific expression but i don't really know how to change a CSS value of only an expression and not the entire tag. Or if there is a better way to achieve this, so I don't have to manually create tags for the specific parts that I want to underline.
maybe something like this?
jsfiddle
<div ng-app='App'>
<div ng-controller="MyCtrl">
<span ng-bind-html-unsafe="1000000 | wrap"></span>
</div>
</div>
var app = angular.module('App',[]);
app.filter('wrap', function () {
return function (text) {
var t = '<u>'+text+'</u>';
return t;
};
});
function MyCtrl($scope) { }

Angularjs ng-repeat does not work if div is moved

in angularJS I am using ng-repeat to build an list of items. The list is initially in a popup created through kendoui's window. There is a requirement that the popup should be pinnable so I am moving the contents of the div to another div. Works perfectly till now.
After I refresh the array bound with ng-repeat through an ajax call the list becomes empty.
I have created a simple fiddle to show that ng-repeat stops working if div is moved. In the fiddle there is no ajax call so the list does not get empty.
Html:
<p>
<button ng-click="AddInArray()">Add</button>
</p>
<div id="lblDiv">
<label ng-repeat="item in itemsArray | orderBy:'toString()'">{{item}}-{{$index}}:</label>
</div>
<button id="btn" ng-click="btn_click()">Move</button>
<div id="container">
</div>
JS:
$scope.itemsArray = ["Test"];
$scope.AddInArray = function() {
this.itemsArray.push("Test");
}
$scope.btn_click = function() {
var html = $("#lblDiv").html();
$("#container").html(html);
$("#lblDiv").html("");
}
Here is the fiddle
I have corrected your fiddle here.
Basically, you had to change this:
$scope.btn_click= function(){
var html = $("#lblDiv");
$("#container").append(html);
$("#lblDiv").remove(html);
};
Or, which is just the same, but in one line:
$("#lblDiv").appendTo("#container");
Glad to help!
You've emptied the template.
$("#lblDiv").html("");
Should be:
$scope.itemsArray = ["Test"];
Fiddle
If you want to actually move the div replace the entire function with:
$("#lblDiv").appendTo("#container");
Fiddle
Add this one it might help you
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.itemsArray = ["Test"];
$scope.AddInArray = function() {
this.itemsArray.push("Test");
};
$scope.btn_click= function(){
var html = $("#lblDiv");
$("#container").html(html);
$("#lblDiv").append("");
};
}

Categories