So I'm trying to zebra stripe my ng-repeat so the rows can be easily distinguished.
I think I have everything wired up correctly, but the classes just aren't being applied.
I've created a plunker here.
My html looks like this:
<div ng-repeat="removal in removals" ng-class-even="even" ng-class-odd="odd" class="remove-relation-titles-list">
<div class="pull-left relation-titles-left-list">
<span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
<span class="acct-title"> - Standard Checking</span>
</div>
</div>
So, the regular class is being applied just fine, but the even and odd ones aren't at all. If you inspect the object and add the even class yourself, it shows up beautifully. I've tried moving this down to the div inside the ng-repeat with no results.
Am I missing something obvious?
Change your ng-class to:-
ng-class="{'even':$even,'odd':$odd}"
Plnkr
$even and $odd are the properties added by ng-repeat on its scope.
or change it to take string value of the class names otherwise it will try to replace the class based on the property even or odd which does not exist:-
ng-class-odd="'odd'" ng-class-even="'even'"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js#1.0.7"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="removeTitlesCtrl">
<div id="body_content_wrapper">
<div>
<h4 class="heading toggle header-block">These are the accounts chosen</h4>
</div>
<div ng-repeat="removal in removals" ng-class-even="'even'" ng-class-odd="'odd'" class="remove-relation-titles-list">
<div class="pull-left relation-titles-left-list">
<span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
<span class="acct-title"> - Standard Checking</span>
</div>
</div>
</div>
</div>
</body>
</html>
This is a simple mistake please correct.
ng-class-even="'even'" ng-class-odd="'odd'"
Related
I have created an array example. There is a text box that accepts the number and on clicking on add, it adds the number to a defined array. And on display i want it to display the array. But what is happening is, as soon as i click on add button, the number simultaneously is being displayed on the HTML page. I guess its because of ng-model, but i want it to be displayed only when i click on display button. Please help.
<html ng-app="Swabhav.Array">
<head>
<title>Array</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="ArrayController">
<input type="text" ng-model="arraynumber">
<button type="button" value="Add" ng-
click="addElementToArray(arraynumber)">Add</button>
<button type="button" value="Display" ng-
click="displayElementsInArray()">Display</button>
<li ng-repeat="element in elements track by $index ">
<h4> {{element}} </h4>
</li>
</div>
<script>
angular.module("Swabhav.Array",[])
.controller("ArrayController",
["$scope","$log",function($scope,$log){
$scope.numbers=[];
$scope.number="";
$scope.addElementToArray=function(number){
$scope.numbers.push(number);
$log.log("inside add "+ $scope.numbers)
}
$scope.elements=[];
$scope.displayElementsInArray=function(){
$log.log("Inside Display")
$scope.elements.push($scope.numbers);
}
}])
</script>
</body>
</html>
You can try like the below code, also check this working plunker link for your example scenario.
Controller:
$scope.numbers=[];
$scope.elements=[];
$scope.addElementToArray=function(number){
$scope.numbers.push(number);
$scope.arraynumber='';
};
$scope.displayElementsInArray=function(){
angular.extend($scope.elements, $scope.numbers)
};
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 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>
Could any one please help me in clicking the link (Images1) under a div?
<div class="test1"><a class="k1">Images1</a></div>
<div class="test1"><a class="k1">Images2</a></div>
Note: Not working
var imagesLink = driver.FindElements(By.ClassName("k1"))[0];
imagesLink.Click();
I am getting an error:
{Error "Compound class names are not supported. Consider searching for one class name and filtering the results."}
First of all, if your page is in an iframe, you need to switch to the frame first.
Given the html from comment as below:
<html lang="en" xmlns="w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="hdtb" role="navigation">
<div id="hdtbSum">
<div id="hdtb_msb">
<div class="hdtb_mitem hdtb_msel"> </div>
<div class="hdtb_mitem"> <a class="q qs" href="yahoo.co.in">Yahoo</a> </div>
<div class="hdtb_mitem"><a class="q qs" href="gmail.com">Gmail</a></div>
<div class="hdtb_mitem"><a class="q qs" href="hotmail.com">Hotmail</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>
Multiple ways of finding the Gmail link:
driver.FindElement(By.CssSelector(".hdtb_mitem > a[href='gmail.com']")).Click();
// alternatives:
// driver.FindElements(By.CssSelector(".hdtb_mitem > a"))[1].Click();
driver.FindElement(By.XPath("//div[#class='hdtb_mitem']/a[#href='gmail.com']")).Click();
// alternatives:
// driver.FindElement(By.XPath("//div[#class='hdtb_mitem']/a[text()='Gmail']")).Click();
// driver.FindElements(By.XPath("//div[#class='hdtb_mitem']/a"))[1].Click();
// driver.FindElement(By.XPath("(//div[#class='hdtb_mitem']/a)[2]")).Click();
ANother XPath approach would be to search 'by text' as the contained text appears to be the only truly unique identifier (this is generally not ideal, but it appears you don't have control of the HTML in this case).
driver.FindElement(By.XPath("//div[#class='test1']/a[contains(text(), 'Images2')]")).Click();
IWebElement elment = driver.FindElement(By.PartialLinkText("Click"));
element.Click();
http://jsfiddle.net/fresheyeball/5z7bX/
<script type="text/ng-template" id="/newTrack.html">
<h1>New Track </h1>
<p>Hello there</p>
</script>
<div id="overlay" closemodal></div>
<div id="modal"><a id="closeModal" closemodal></a>
<div id="modalContent" ng-include src="/newTrack.html"></div>
</div>
I would expect the following result:
<div id="overlay" closemodal></div>
<div id="modal"><a id="closeModal" closemodal></a>
<div id="modalContent" ng-include src="/newTrack.html">
<h1>New Track </h1>
<p>Hello there</p>
</div>
</div>
But nothing seems to happen. Really I am trying to render the template from inside a custom directive, after tracking it down for a while, it appears I can't get ng-include to working even in its most simple form. What am I missing here?
Under Fiddle Options, add <body ng-app>
src: If the source is a string constant, make sure you wrap it in quotes, e.g.,src="'myPartialTemplate.html'". -- ngInclude docs
So ng-include src="'/newTrack.html'"
Fiddle