ng-class="{highlightRow: row.Note === 'Success'}"
If this highlights the rows whose Note field is Success, can I have a condition inside this ng-class to highlight rows where Note field is either Success or Warning?
You can have ng-class="{highlightRow: (value === 'Success' || value ==='Warning')
I gave success by default and after 3 seconds it changes to Warning, but the highlightRow remains same. Pleas check below snippet and demo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<style>
.highlightRow{
color: green
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-class="{highlightRow: value === 'Success' || value ==='Warning'}">{{value}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.value = "Success";
$timeout( function(){
$scope.value = "Warning";
}, 3000 );
});
</script>
</body>
</html>
Please run the above Code
Here is a working DEMO
Did you try this yet?
ng-class= "{'highlightRow' : row.Note === 'Success' || row.Note === 'Warning'}"
Related
How to do I add mainCtrl.header.Version in the string text if the condition in ng-attr-title is false?
HTML
<label class="form-control" ng-attr-title="{{mainCtrl.header.Version == 0 ? 'This form has not yet been submitted for approval' : 'This form has been submitted for approval {{mainCtrl.header.Version}} times'}}">{{mainCtrl.header.Version}}</label>
The syntax is :
ng-attr-title="{{mainCtrl.header.Version == 0 ? 'This form has not yet been submitted for approval' : 'This form has been submitted for approval ' + mainCtrl.header.Version + ' times'}}"
ng-attr-title displays the string it is given, so you have to use {{ expr }}.
To test your expression I'd advice you to write <pre>{{ your expression | json }}</pre> to see what is the result.
You can achieve it from JS controller side. Take a variable title check if version is 0 then assign title you want. And if version is > than 0 then concat the version with title message. Please consider the following code snippet.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl as mainCtrl">
<label class="form-control" ng-attr-title="{{mainCtrl.title}}">
{{mainCtrl.header.Version}}
</label>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var mainCtrl = this;
mainCtrl.header = {"Version":0};
if( mainCtrl.header.Version == 0 )
{
mainCtrl.title = "This form has not yet been submitted for approval";
}
else
{
mainCtrl.title = "This form has not yet been submitted for " +mainCtrl.header.Version+" approval";
}
});
</script>
</body>
</html>
you can do it by calling a function like that:
var app = angular.module('app', []);
app.controller('htmlTitle', ['$scope','$http', function($scope, $http){
$scope.mainCtrl = {
header: {
Version: 0
}
};
$scope.get_title = function(){
if($scope.mainCtrl.header.Version == 0){
return 'This form has not yet been submitted for approval';
}
else{
return 'This form has been submitted for approval ' + $scope.mainCtrl.header.Version + ' times';
}
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="htmlTitle">
<label class="form-control" title="{{get_title()}}" >{{mainCtrl.header.Version}}</label>
</div>
</div>
and here is a codepen.
I am trying to create a new custom filter which will remove duplicates from the array of numbers , there's no error but no output as well , can someone please tell me what is wrong.
HTML CODE :
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCont">
<div ng-repeat="num in uniqueArray | unique">
checking numbers :
{{num}}
</div>
</div>
</div>
<script src="jquery-3.0.0.js"></script>
<script src="angular.js"></script>
<script src="angular_try.js"></script>
</body>
</html>
Angular js code :
var myApp = angular.module("myApp",[])
myApp.controller("myCont",["$scope","$filter",function($scope,$filter){
$scope.uniqueArray = [5,10,500,2,6,5,4,10,20,5]
}])
myApp.filter("unique",function(){
var arrNumb = [];
var arrNumb2 =[];
return function(input){
angular.forEach(input,function(value,index,obj){
if(arrNumb.indexOf(value)==-1)
{
arrNumb.push(index);
arrNumb2.push(value);
}
})
}
return arrNumb2;
})
But there's nothing on the screen what am I doing wrong ???
You've probably just misplaced a return statement. Put return arrNumb2; inside the inner returned function (move it up one line)
Also, as suggested in the comments, try moving the declarations inside as well.
var myApp = angular.module("myApp",[])
myApp.controller("myCont",["$scope","$filter",function($scope,$filter){
$scope.uniqueArray = [5,10,500,2,6,5,4,10,20,5]
}])
myApp.filter("unique",function(){
return function(input){
var arrNumb = [];
var arrNumb2 =[];
angular.forEach(input,function(value,index,obj){
console.log("protima koo koo ")
//arrNumb.push(value[name])
if(arrNumb.indexOf(value)==-1)
{
arrNumb.push(index);
arrNumb2.push(value);
}
})
return arrNumb2;
}
})
I study AngularJS, now try to add an attribute based on one (or multiple) condition(s).
But this code (CodePen here) doesn't seem to work:
function myController($scope) {
console.log("start");
$scope.item = { myBool: false };
$scope.myClick = function(e) {
var myHref = angular.element(e.delegateTarget).data(href);
console.log(myHref);
};
}
.test{background: lightblue; height: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div np-app ng-controller="myController">
<div class="test"
data-href="{undefined: !item.myBool, 'http://yes.com': item.myBool}"
ng-click="myClick($event);console.log('end');">click & see the console</div>
</div>
actually the data-href attribute should not be defined, as myBool == false...
Use interpolation for that:
angular.module('myApp', [])
.controller('myController', function($scope) {
console.log("start");
$scope.item = {
myBool: false
};
$scope.myClick = function(e) {
$scope.item.myBool = !$scope.item.myBool;
console.log(angular.element(e.target).attr("href"));
};
});
.test{background: lightblue; height: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="test" href="{{item.myBool ? 'http://yes.com' : undefined}}" ng-click="myClick($event)">
click & see the console
</div>
</div>
Finally, updated a little bit the Vanojx1 answer to:
angular.module('myApp', [])
.controller('myController', function($scope) {
console.log("start");
$scope.item = { myBool: false };
$scope.myClick = function(e) {
$scope.item.myBool = !$scope.item.myBool;
console.log(angular.element(e.target).attr("href"));
console.log(angular.element(e.target).attr("noarg"));
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="test" ng-attr-href="{{item.myBool? 'http://yes.com' : undefined}}" ng-click="myClick($event)">
click & see the console
</div>
</div>
Important improvements:
updated the Angular version to be > 1.3 (actually I used an ancient one);
used the ng-attr-xxx attribute that is removed (the attribute itself, not just its value) if its value estimated to undefined;
Suppose two input fields - name and text. How to simultaneous watch this two fields and interpolate their value into one expression?
Thanks!
Update 9/7/2014:
I did this Plunkr with a working version of the code :)
Thanks Mohammad Sepahvand!
Code:
<!doctype html>
<html ng-app="myApp">
<head>
<title>Interpolate String Template Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', ['emailParser']).controller('MyController', ['$scope', 'EmailParser', function ($scope, EmailParser) {
// init
$scope.to = '';
$scope.emailBody = '';
$scope.$watchCollection('[to, emailBody]', function (newValues, oldValues) {
// do stuff here
// newValues and oldValues contain the new and respectively old value
// of the observed collection array
if (newValues[0] && newValues[1]) { // there's name and some text?
$scope.previewText = EmailParser.parse(newValues[1], {to: $scope.to});
}
});
}]);
angular.module('emailParser', []).config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');
}]).factory('EmailParser', ['$interpolate', function ($interpolate) { // create service
return {
parse: function (text, propertiesToBeInterpolated) { // handle parsing
var template = $interpolate(text);
return template(propertiesToBeInterpolated);
}
};
}]);
</script>
</head>
<body>
<h3>Instructions in readme.md file - please read before!</h3>
<div id="emailEditor" ng-controller="MyController">
<label>*Name:</label>
<input ng-model="to" type="text" placeholder="Ex.: John"/>
<br><br>
<label>*Text:</label><br>
<textarea ng-model="emailBody" cols="25" rows="10" placeholder="Write something"></textarea>
<p style="color:red;">*required</p>
<div>
<pre>__previewText__</pre>
</div>
</div>
</body>
</html>
You can use the $watchGroup method that was added in angular 1.3:
$scope.$watchGroup(['prop1', 'prop2'], function(newValues, oldValues, scope) {
var prop1 =newValues[0];
var prop2 =newValues[1];
});
Or you could use $watchCollection which has been available since angular 1.1.4:
scope.$watchCollection('[prop1, prop2]', function(newValues, oldValues){
});
Say I have some html as follows:
<html>
<head> angular etc. </head>
<body ng-app>
<div ng-controller="MyCtrl">
<input ng-model="weight" type="number" min="{{minWeight}}" max="{{maxWeight}}">
<p>{{weight}}</p>
</div>
</body>
</html>
and the following controller:
function MyCtrl($scope){
$scope.weight = 200;
$scope.minWeight = 100.0;
$scope.maxWeight = 300.0;
}
The "min" and "max" will show the user their input is bad, and if I hard code them to say, 100 and 300, it will make sure the value is never bound to the model at all (why isn't the behavior the same??). What I'd like to do is only actually change the "weight" if the value meets the input requirements. Any thoughts?
I don't fully understand what are you trying to do.
HTML:
<html>
<head> angular etc. </head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<input ng-model="weight" type="number" min="{{minWeight}}" max="{{maxWeight}}">
<p>{{weight}}</p>
</div>
</body>
</html>
Angular: [Edit]
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function MyCtrl($scope){
$scope.weight = 200;
$scope.minWeight = 100.0;
$scope.maxWeight = 300.0;
$scope.$watch('weight', function (newValue, oldValue) {
if(typeof newValue === 'number') {
if(newValue > $scope.maxWeight || newValue < $scope.minWeight) {
$scope.weight = oldValue;
}
}
});
}]);
But here is an example I made in jsFiddle. I hope this was a solution you were looking for.
[Edit]
http://jsfiddle.net/migontech/jfDd2/1/
[Edit 2]
I have made a directive that does delayed validation of your input field.
And if it is incorrect then it sets it back to last correct value.
This is totally basic. You can extend it to say if it is less then allowed use Min value, if it is more then allowed use Max value it is all up to you. You can change directive as you like.
http://jsfiddle.net/migontech/jfDd2/2/
If you have any questions let me know.