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.
Related
I'm trying to add a date that defaults to the current day to my page. Below is the angular script for this but when I click add day I get error of undefined? I don't understand I believe it's been defined correctly.
$scope.today= new Date();
$scope.add = {};
if($scope.today){
var today= new Date($scope.today)
$scope.add.today=
today.getFullYear()+'-'+(today.getMonth() + 1)+'-'+today.getDate();
}else{
$scope.add.today= null;
}
<div class="form-group col-sm-4">
<label for="Date">Date</label>
<input type="date" class="form-control" name="add_row_today" id="add_row_today" ng-model="today">
</div>
This is what my code looks like.
this is the stack trace from console
TypeError: Cannot set property 'today' of undefined
at m.$scope.add_list (angularScripts.js?v=1.3:8741)
at fn (eval at compile (_bower.js?v=1.2:10467), <anonymous>:4:220)
at b (_bower.js?v=1.2:10360)
at e (_bower.js?v=1.2:10510)
at m.$eval (_bower.js?v=1.2:10379)
at m.$apply (_bower.js?v=1.2:10380)
at HTMLInputElement.<anonymous> (_bower.js?v=1.2:10510)
at HTMLInputElement.dispatch (_bower.js?v=1.2:5201)
at HTMLInputElement.elemData.handle (_bower.js?v=1.2:5009)
You have a typo.
property 'today' of undefined means something has .today, which doesn't exists. In your case it's either $scope.add or $scope.edit
I think while changing your code, you forgot to replace one of them. Try changing:
$scope.edit.today = null;
to
$scope.add.today = null;
Or initialise it, if you are missing it with $scope.edit = {};
Given your edited code, you have a working solution
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.today = new Date();
$scope.add = {};
if ($scope.today) {
var today = new Date($scope.today)
$scope.add.today =
today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
} else {
$scope.add.today = null;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group col-sm-4">
<label for="Date">Date</label>
<input type="date" class="form-control" name="add_row_today" id="add_row_today" ng-model="today">
</div>
</div>
</body>
</html>
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'}"
In my webapp there are list of check boxes present. What i need is, from back-end am getting a list where data is present, based on this data i want to automatically check the checkbox. If it confusing the below is my code.
html
<span ng-repeat="days in selectDays">
<input type="checkbox" id="{{days}}" ng-model="selectedList[days]" value="{{days | uppercase}}"/>
<label for="{{days}}">{{days}}</label>
</span>
controller
$scope.selectDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
From back end i am getting below data in response
["SUN", "MON"];
below am sharing the snapshot of my page.
My need is to check the response data with $scope.selectDays if it is present then i have to check that respective check box. i.e. if "SUN" is there in the list then i have to check that.
You can use ng-checked
<span ng-repeat="days in selectDays">
<input type="checkbox" ng-checked="response.indexOf(days) !== -1" id="{{days}}" ng-model="selectedList[days]" value="{{days | uppercase}}"/>
<label for="{{days}}">{{days}}</label>
</span>
DEMO
Look it:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div id="wrapper" ng-repeat="x in dayList">
<input type="checkbox" ng-checked="findIt(x.name)">{{x.name}}
</div>
<script>
//module declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.dayList = [{name:'Sun'}, {name:'Mon'}, {name:'Tue'}, {name:'Wed'}, {name:'Thu'}, {name:'Fri'}, {name:'Sat'}];
$scope.marked = ['Sun','Wed'];
$scope.findIt = function(item){
if($scope.marked.indexOf(item)!= -1){return true;}
}
});
</script>
</body>
</html>
Result:
Hope, this helps!
HTML
<div ng-controller="MyCtrl">
<span ng-repeat="days in selectDays">
<input type="checkbox" id="{{days.Day}}" value="{{days.Day | uppercase}}" ng-checked="days.IsCheck"/>
<label for="{{days.Day}}">{{days.Day}}</label>
</span>
</div>
JS
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope, $filter) {
$scope.selected = ['Sun', 'Wed']
$scope.selectDays = [{"Day" : 'Sun',"IsCheck" : false},
{"Day" : 'Mon',"IsCheck" : false}, {"Day" : 'Tue',"IsCheck" : false},
{"Day" : 'Wed',"IsCheck" : false}]
angular.forEach($scope.selected,function(obj,i){
var obj = $filter('filter')($scope.selectDays, { Day: obj })[0];
if(obj != null)
{
obj.IsCheck = true;
}
})
}
Please find jsfiddle link as well
Demo
I have the following
var model =
{
UserInfo :null ,
PlatformID : 1
}
var myApp = angular.module("myApp", []);
myApp.controller("UCtrl",['$scope','$http','$window', function ($scope, $http,$window) {
$scope.Info =model ;
$scope.SearchUser = function() {
$http({
method:"POST",
url : '/FindUser',
data: {UserID : 9999}
}).success(function(data){
$scope.Info.UserInfo = data;
});
};
});
<div ng-hide="{{Info.UserInfo === null}}" >
</div>
When a user is searched for , the Info.User is updated via $http post via
$scope.Info.User = data ;
The ng-hide part does not show after the data is assigned to the Info.User object even though there is data.
Don't user {{}} inside ng-if. Expression will be executed anyway:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
</head>
<body ng-app="Example">
<div data-ng-controller="Cntrl">
<div ng-hide="UserInfo === null" >
User info
</div>
<button data-ng-click="toggle()">Toggle</button>
</div>
<script>
var app = angular.module("Example", [])
.controller("Cntrl", function ($scope) {
$scope.UserInfo = null;
$scope.toggle = function () {
if ($scope.UserInfo === null) {
$scope.UserInfo = 'some value';
} else {
$scope.UserInfo = null;
}
};
});
</script>
</body>
</html>
EDIT: here is another fiddle with code more like yours: http://jsfiddle.net/kpLe544u/3/
I think the issue is that you haven't declared a controller in your HTML so you cannot access the variable Info.UserInfo from that div.
Excerpts from my fiddle: (http://jsfiddle.net/kpLe544u/2/)
HTML
<div ng-app>
<div ng-controller="MyCtrl">
<div ng-show="Info.User">data here</div>
<div ng-show="Info.Test">this won't show</div>
</div>
</div>
controller.js
function MyCtrl($scope) {
$scope.Info = {};
$scope.Info.User = "blah blah";
$scope.Info.Test = null;
}
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){
});