I've been trying to trigger a validation error on <md-contact-chips> for ng-minlength/maxlength/required but haven't been able to implement this effectively.
Is there a straight forward way to implement this myself? -- it seems for some reason that the contact chips directive in Angular Material does not support these validations.
See codepen here:
http://codepen.io/anon/pen/YqdRNw
<form name='myForm'>
<div ng-controller="ContactChipDemoCtrl as ctrl" layout="column" ng-cloak="" class="chipsdemoContactChips" ng-app="MyApp">
<md-content class="md-padding autocomplete" layout="column">
<md-contact-chips ng-model="ctrl.contacts" ng-minlength='1' ng-required='true' ng-maxlenght='3' name='contacts' md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i" filter-selected="ctrl.filterSelected" placeholder="To" >
</md-contact-chips>
<p ng-show="myForm.contacts.$error.required" class="text-danger">You did not enter a contact</p>
<p ng-show="myForm.contacts.$error.minlength" class="text-danger">Your contact list is too short</p>
<p ng-show="myForm.contacts.$error.maxlength" class="text-danger">Your contact list is too long</p>
</md-content>
</div>
</form>
You cannot use this attribute directly. you have to use custom validation for it.
<md-contact-chips ng-model="ctrl.contacts" md-transform-chip="customvalidation($chip)"> </md-contact-chips>
<p ng-show="ctrl.contacts.length == 0 && ctrl.contacts.$touched"> Required </p>
<p ng-show="ctrl.contacts.length < 3 && ctrl.contacts.$touched"> Minimum 2 Contacts are required </p>
<p ng-show="ctrl.contacts.length > 5 && ctrl.contacts.$touched"> Maximum 5 Contacts can be added </p>
Inside controller you can define customvalidation function and add extra condition if you want.
function customvalidation(chip){
if(satisifedCondition(chip)){
return null //It will add chip
} else { return undefined } // It will not add chip
}
For the time being, you will need to write your own validation. Currently, md-chips only supports md-max-chips validation. Other forms of validation are currently pending. md-chips api
You can use the chips length property to get the number of chips in the array. With this you can use ng-show on your error messages to perform the necessary validation checks.
Ex: ng-show="myForm.contacts.length == 0"
Additionally, you can use md-on-add or md-on-remove to write your own validation.
Thats the how can I handle required validation with md-chips and md-contact-chips
I don't test code completely but I wrote that for give you an idea. I hope it helps you !
angular.module('MyApp', ['ngMaterial'])
.controller("ContactChipDemoCtrl", ['$scope', function ContactChipDemoCtrl($scope) {
$scope.formRequiredError = {};
$scope.sendButton = function(form) {
$scope.formRequiredError = {
"required": $scope.contacts.length <= 0;
};
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<html lang="en" ng-app="MyApp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
</head>
<body layout="column" ng-controller="ContactChipDemoCtrl as ctrl">
<form name='myForm'>
<div layout="column" ng-cloak="" class="chipsdemoContactChips">
<md-content class="md-padding autocomplete" layout="column">
<md-contact-chips ng-model="ctrl.contacts" ng-minlength='1' ng-required='true' ng-maxlenght='3' name='contacts' md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i"
filter-selected="ctrl.filterSelected" placeholder="To">
</md-contact-chips>
<p ng-show="myForm.contacts.$error.minlength" class="text-danger">Your contact list is too short</p>
<p ng-show="myForm.contacts.$error.maxlength" class="text-danger">Your contact list is too long</p>
</md-content>
</div>
<div class="custom-error" ng-if="ctrl.contacts.length <= 0">
<div ng-messages="formRequiredError">
<div ng-message="required" translate='form_user_empty'></div>
</div>
</div>
</form>
</body>
</html>
Simple workaround:
<md-contact-chips
ng-class="{'myError': object.fieldName !== undefined && object.fieldName.length == 0}"
ng-model="object.fieldName"
otherStuff></md-contact-chips>
In CSS
.myError input::placeholder {
color: rgb(221,44,0) !important;
}
Related
I am new to AngularJS. I'm trying to toggle a modal into view using ng-if and ng-click.
Essentially, in my controller, I have a scoped variable called "aboutOn". When it is true, the modal is displayed. When it's false, it's not. Simple.
The ng-if part works. But the ng-click part is causing trouble. Sometimes, it just doesn't work.
To open the modal I have this:
<div id="about-link-container" ng-click="aboutOn=true">
<p><i class="far fa-info-circle"></i> About</p>
</div>
This does not work how I want it to work. If I click on the actual text, nothing happens. It only triggers when I click around the border, not directly on the link. If I put the ng-click on the p tag, it doesn't work at all.
Then inside the modal, I have this to close it:
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
This doesn't work at all. What's going on here? Here is my controller, if that's possibly related:
angular.module('myApp', [])
.controller('myController', ['$scope', function myController($scope) {
$scope.female_name = "female name";
$scope.position = "position";
$scope.tedious_task = "tedious task";
$scope.dirty_task = "dirty task";
$scope.female_name = "female name";
$scope.celebrity = "celebrity";
$scope.useless_skill = "useless skill";
$scope.aboutOn = false;
}]);
Here is the entire view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower|Oswald" rel="stylesheet">
<script data-require="angular.js#1.3.10" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body ng-app="myApp">
<div ng-controller='myController'>
<div class="form">
<div id="about-link-container" ng-click="aboutOn=true">
<p><i class="far fa-info-circle"></i> About</p>
</div>
<h1>M<img src="angular-logo.png" class="logo" />DLIBS</h1>
<div class="form-inner">
<h2>Provide the following words:</h2>
<input ng-model="female_name" />
<input ng-model="position" />
<input ng-model="tedious_task" />
<input ng-model="dirty_task" />
<input ng-model="celebrity" />
<input ng-model="female_name" />
<input ng-model="useless_skill" />
</div>
</div>
<div class="display">
<p>{{ female_name }} was a {{ position }}. Although she loved parts of her job,
she absolutely hated {{tedious_task}} and {{dirty_task}}. So, {{female_name}} met
with her life mentor {{celebrity}} who told her to learn how
to {{useless_skill}} at school. Her school didn't offer a
course on {{useless_skill}} so she studied programming instead.
</p>
</div>
<div ng-if="aboutOn" class="about">
<div class="about-main">
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
<h2 class="about-title"><i class="fas fa-info-circle"></i> About</h2>
<p class="about-p">Madlibs is an AngularJS application. When user fill in the words in
the form above, those words will automatically populate the paragraph below.
Try different combinations!
<br />
<br />
This application was made in 2018 by Jack Seabolt. It was constructed using AngularJS.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
There are two problems that give you this issue.
ng-if creates its own scope.
So if you want to reach controller's scope, you need to have ng-click="$parent.aboutOn=false"
FA icons replace DOM (?). You cannot have ng-click on an icon.
Wrap your icon with <div> (as you already do) and put ng-click on it
The code that you need to change, from this:
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
to this:
<div class="about-close" ng-click="$parent.aboutOn=false">
<i class="fas fa-times about-close-icon"></i>
</div>
The default hide directive with angular-formly is ng-if which can be configured via e.g. the formlyConfigProvider.
Currently all my fields should always be shown and I don't want to have unneccesary ng-if="!field.hide" checks rendered that can inpact the performance.
How can I tell formly not to use this check per field/form or globally?
ng-if add and remove elements from the DOM, when you want to show and hide large number of elements it can be slow, insted you can use ng-show.
ng-show will only change the visibility of the element.
<html lang="en" itemscope="" itemtype="http://schema.org/Article">
<head>
<script>
var oModelesDep = [];
</script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://s3.amazonaws.com/gowpres/resources/js/utils/jquery-1.10.2.js"></script>
<!-- Angular Material Library -->
<script src="https://www.weldpad.com/starterkit.js?containerId=60515"></script>
<script data-meta="61021" src="https://www.weldpad.com/sogettopanswerers.html?containerId=61021"></script>
</head>
<body ng-controller="AppCtrl" ng-app="MyApp">
<h4 ng-init="showchat = true">Your - Starter Kit</h4>
<button ng-click="showchat = false">hide</button>
<button ng-click="showchat = true">show</button>
{{showchat}}
<sogettopanswerers ng-show="showchat" tag="html">
<div ng-repeat="qdata in listqdata.items track by $index" style="background-color: white;">
<div class="well" style="overflow: auto;">
<h2>
<a href="{{qdata.link}}" class="question-hyperlink">
{{qdata.title}}
</a>
<small>{{qdata.view_count}} Views</small></h2>
<contentashtml ng-init="load()" content="qdata.body">
</contentashtml>
<div style="padding:15px;display: inline-block;vertical-align: top;">
<p>Name: {{qdata.owner.display_name}}</p>
<a href="{{qdata.owner.link}}">
<img ng-src="{{qdata.owner.profile_image}}" alt="Description"/>
</a>
</div>
<div style="display: inline-block;">
<p>Created: <span am-time-ago="qdata.creation_date * 1000"></span></p>
<p>
Last Update:<span am-time-ago="qdata.last_activity_date * 1000"></span>
</p>
<p>
Answered:{{qdata.is_answered}}
</p>
</div>
<p>
Answers:{{qdata.answer_count}}
</p>
</div>
</div>
</sogettopanswerers>
</body>
</html>
Look at the line:
<sogettopanswerers ng-show="showchat" tag="html">
and see how fast the response is.
you set hide-directive="ng-show" in the formly-form
<formly-form hide-directive="ng-show"></formly-form>
"hide-directive
Allows you to control the directive used to hide fields. Common value for this might be ng-show. It will be passed !field.hide. You can also specify this on a global level using formlyConfig.extras.defaultHideDirective = 'ng-show'"
http://docs.angular-formly.com/docs/formly-form
So you can either set it as I instructed or you can choose to edit it in the config on startup for all fields
I'm somewhat new to Angular so this may be something obvious I'm missing but...
I have a page with three main sections: top,middle, bottom. Nav buttons on the top make calls to JS functions that use $.ajax() to find pages and then populate the middle section. However, the angular references in the included file aren't working. It's like it can't see the controller. The ng-controller is on the body tag, but I also put it on the div in the included file in case that was the cause, but to no avail.
Does the angular code not know about the controller since it was loaded after the main page?
How can I get the angular code in the included file to work? I'm specifically using ng-click and ng-controller, but I also tried just outputting a variable from inside the controller and it simply outputs {{nav.sidelink}} to the screen.
app.js:
(function(){
var app = angular.module('vetSite', []);
app.controller('NavController', function(){
var subtab = 1;
var sidelink = 1;
this.setTab = function(st){
this.tab = st;
}
this.isSet = function(ct){
return this.tab === ct;
}
this.setSubTab = function(st){
this.subtab = st;
}
this.isSetSub = function(ct){
return this.subtab === ct;
}
this.setSideLink = function(sl){
this.sidelink = sl;
}
this.isSetSideLink = function(cl){
return this.sidelink === cl;
}
});
})();
HTML of included file:
<div id="subcontent">
<div ng-show="nav.isSetSideLink(1)">
Prairie has quality machines in our laboratory that can give us blood cell counts, electrolytes, and blood chemistry to check internal organs. This enables us to diagnose and treat patients rapidly, and to monitor response to treatment without waiting 24 hours for the bloodwork to come back from an outside laboratory. Having this information can make a huge difference in our success.
</div>
<div ng-show="nav.isSetSideLink(2)">
Being able to evaluate joint fluid for infection allows us to make a diagnosis and start treatment rapidly, increasing the chances of a positive outcome.
</div>
<div ng-show="nav.isSetSideLink(3)">
Real time evaluation of abdominal fluid can help with the diagnosis of colic. Increases in white blood cells and changes in abdominal fluid chemistries can indicate that the gut is becoming damaged. Getting these horses to colic surgery more quickly can result in a better outcome.
</div>
<div ng-show="nav.isSetSideLink(4)">
Running cultures in house enables us to know what type of bacteria is involved in an infection within 24-48 hours of an examination and can help direct treatment. Obtaining an antibiotic sensitivity for that bacteria rapidly improves the chances for a quick, full recovery. Sending cultures to an outside laboratory delays this information 36-48 hours.
</div>
</div>
<div id="subsidenav">
<div class="side_subnavbutton" ng-class="{ side_navbutton_selected:nav.isSetSideLink(1) }"><a href ng-click="nav.setSideLink(1);">In-House Blood Analysis</a></div>
<div class="side_subnavbutton" ng-class="{ side_navbutton_selected:nav.isSetSideLink(2) }">In-House Joint Fluid Analysis</div>
<div class="side_subnavbutton" ng-class="{ side_navbutton_selected:nav.isSetSideLink(3) }"><a href ng-click="nav.setSideLink(3);">In-House Abdominal Fluid Analysis</a></div>
<div class="side_subnavbutton" ng-class="{ side_navbutton_selected:nav.isSetSideLink(4) }"><a href ng-click="nav.setSideLink(4);">In-House Cultures</a></div>
</div>
It's totally ignoring all references to nav. All four paragraphs are showing up, and none of the links are changing class (despite nav.sidelink being initialized)
How do I make it see the controller?
Thanks.
EDIT: Some potentially important information:
here is the originally loaded page:
<html ng-app="vetSite">
<head>
<title>Welcome!</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript1.2" src="/js/angular.min.js"></script>
<script language="javascript1.2" src="/js/app.js"></script>
<script language="javascript1.2" src="/js/divs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body ng-controller = "NavController as nav">
<div id="top_area">
<div id="header">
<img src="/images/headerlogo.gif" align="left" />
<img src = "/images/mastheads/fronthall_clearMH.jpg" align="right" /> <br clear="all"/>
<div>
<div class="buttondiv" style="left:50%;" ng-class="{ buttondiv_selected:nav.isSet(1) }">HOME</div>
<div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(2) }">STAFF</div>
<div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(3) }">SERVICES</div>
<div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(4) }">FACILITY</div>
<div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(5) }">LOCATION</div>
<div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(6) }">CONTACT</div>
<div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(7) }">CAREER</div>
</div>
<br/>
<br clear="all"/>
<div id="separatordiv"> </div>
</div>
</div>
<div id="middle_area">
<br clear="all" />
<div id="subnav" ng-show="nav.isSet(3);" style="margin-left: 20px;">
<div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(1) }">Sports<br/>Medicine</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(2) }">Surgery</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(3) }">Diagnostic<br/>Imaging</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(4) }">Laboratory<br/>Services</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(5) }">Reproduction</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(6) }">Dentistry</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(7) }">Complementary<br/>Medicine</div>
<br/>
<br clear="all" />
</div>
<div id="subnav" ng-show="nav.isSet(4);" style="margin-left: 20px;">
<div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(1) }">Laboratory</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(2) }">Pharmacy</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(3) }">Hospital</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(4) }">Exam<br/>Room</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(5) }">Surgery<br/>Room</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(6) }">Indoor<br/>Arena</div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(7) }">Outdoor<br/>Arena</div>
<br/>
<br clear="all" />
</div>
<div id="content">
(original content ofmain page)
<br clear="all" />
</div>
</div>
<div id="bottom_area">
<div id="separatordiv"> </div>
<div id="footer">
<br/>
</div>
</div>
</body>
</html>
Everything you see here works. It's when I click on one of those subnav items (that only show up when I click certain tabs) and the SUB page of HTML content loads, that the Angular in there doesn't work.
I finally figured out that I needed to recompile the page once I reloaded the new code to make Angular see it as not just text.
Thanks, all for your suggestions.
I created this simple game where a user is trying to guess a number. I want to use AngularJS frameworks but I am lacking on the basic concepts. For example the first part of my code is a a function that will be used to append the guess to a list of guesses. My issue here is I am not sure how to append to a scope in AngularJS. Here is that part of my original code
var numOfAttempts = 6;
var numOfGuesses = 0;
var numberToGuess = "Three";
function listWordsUsed(numberAttempted)
{
var userTrials = $('#userGuesses');
var divisor = $("<p id ='line'><div class='answers'>" + numberAttempted + "</div></p>");
divisor.hide().appendTo(userTrials).fadeIn(6000);
return;
} //End of function listWordsUsed(numberAttempted)
I know that I will have to make my variables scopes in order to be used by my aplication, like this
$scope.numOfAttempts = 6;
$scope.numOfGuesses = 0;
$scope.numberToGuess = "Three";
However I am not sure how to append to a scope variable in AngularjS. Any suggestions? Hints? By the way here is my HTML as I started setting it up.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Guess the Number in AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="js/controllers/app.js" type="text/javascript"></script>
<script src="js/controllers/maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='numberApp' ng-controller='numberController'>
<p>
<header>
<h2 align="center">What number am I thinking of?</h2>
</header>
<h3>Enter the number:</h3>
<table>
<td><input type='text' ng-model='guestGuess' />
<p>This is: {{guestGuess}}</p>
<p>This is: {{magicWord}}</p>
</td>
<td id="guessBox"><input type="submit" id="guessButton" value="Guess" /></td>
</table>
</p>
<p>
<h3>Your guesses so far are: </h3>
<p style="text-align:center;" id="numberGuesses"></p>
<p id="guessesUsed">You have guessed: <span id="userAttempts"></span> times out six(6) chances.</p>
<p id="guessesLeft">You have <span id="attemptsLeft"></span> guesses left.</p>
</p>
</div>
</div>
</body>
Here's a Plunkr
Basically you just build an array of the guesses you list it with ng-repeat. The rest is just count with .length(), and then do basic math right in the interpolated HTML.
<div ng-controller="numberController">
<h3>Enter the number:</h3>
<input type="text" ng-model="guess" />
<p>Guess is: {{guess}}</p>
<button ng-click="addGuess()">Guess</button>
<h3>Your guesses so far are: <span>{{guessed}}</span></h3>
<ul>
<li ng-repeat="g in guesses">
<p>{{g}}</p>
</li>
</ul>
<p>You have guessed: <b>{{guessed}}</b> times out six({{allowed}}) chances.</p>
<p>You have <b>{{allowed - guessed}}</b> guesses left.</p>
</div>
I want to check boolean data with angular ng-switch
this is my code. but it is not working
<div ng-switch={{Item.ItemDetails.IsNew}}>
<div ng-switch-when="true">
<p class="new fontsize9 fontWeightBold">NEW</p>
</div>
</div>
<div ng-switch={{Item.ItemDetails.IsFeatured}}>
<div ng-switch-when="true">
<div class="featured">
<p class="fontWeightBold fontsize8">featured</p>
</div>
</div>
</div>
values of {{Item.ItemDetails.IsNew}} and {{Item.ItemDetails.IsFeatured}} are true or false
Convert the boolean to a string:
<div ng-switch="Item.ItemDetails.IsNew.toString()">
<div ng-switch-when="true">
If you are just checking for true values, ng-if seems more appropriate and reduces the need for additional divs containing the code, reducing your sample too:
<div ng-if="Item.ItemDetails.IsNew">
<p class="new fontsize9 fontWeightBold">NEW</p>
</div>
<div class="featured" ng-if="Item.ItemDetails.IsFeatured">
<p class="fontWeightBold fontsize8">featured</p>
</div>
Full docs at: http://docs.angularjs.org/api/ng.directive:ngIf
This syntax works for me:
<div ng-switch="Item.ItemDetails.IsFeatured">
<div ng-switch-when="true">FEATURED ITEM HTML</div>
<div ng-switch-default>REGULAR ITEM HTML (not featured)</div>
</div>
You should remove the {{}} from the ng-switch:
Change this <div ng-switch={{Item.ItemDetails.IsNew}}>
to <div ng-switch=Item.ItemDetails.IsNew>
The attribute value of ng-switch are interpreted as literal string values to match against. (Meaning that cannot be expressions.) For example, ng-switch-when="someVal" will match against the string "someVal" not against the value of the expression $scope.someVal.
If you really have to use ng-switch, it can be forced to semi-use evaluative expressions by the workaround of the .toString() javascript method. Example, using the scope variables numeric 'lastSortIndex' and the boolean 'reverseSorted', plus the AngularJS HTML variable '$index':
<div ng-switch="((lastSortIndex === $index).toString()+(reverseSorted).toString())">
<div ng-switch-when="truetrue">
<span class="glyphicon glyphicon-chevron-up">{{ header }}</span>
</div>
<div ng-switch-when="truefalse">
<span class="glyphicon glyphicon-chevron-down">{{ header }}</span>
</div>
<div ng-switch-default>{{header}}</div>
</div>
Note the above example is concatenating the booleans together and then evaluating their string contents. Would be better to move this into a callable function that returns a string to be evaluated in the switch-case.
Though I would recommend if possible for you to keep the logic in the logic-controllers area of the code (the javascript files). You can use the ng-html-safe AngularJS directive in combination with their Sanitize feature to call a function in Javascript that switches and returns desired snippets of HTML code for you. Example:
index.html:
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.3.13/angular-sanitize.js">
</head>
<body ng-controller="MainController">
<!-- add your other code, like a table code here -->
<div ng-bind-html="HeaderSortIcon(lastSortIndex, $index, reverseSorted, header)">
</div>
</body>
script.js:
var myApp = angular.module('myApp ', ['ngSanitize']);
$scope.HeaderSortIcon = function (lastSortIndex, $index, reverseSorted, header) {
if (lastSortIndex === $index) {
if( reverseSorted )
{
return '<div><span class="glyphicon glyphicon-chevron-up"></span>' + header + '</div>';
}
else{
return '<div><span class="glyphicon glyphicon-chevron-down"></span>' + header + '</div>';
}
}
else {
return header;
}
}