I just would like to know what exactly ng-repeat-start and ng-repeat-end are?
And why we should use them instead of ng-repeat?
I mean what is the point?
The point is that sometimes is better to repeat a series of elements instead of just one parent element.
In this case you can get repeat item looks like:
<div ng-repeat-start>ITEM HEADER</div>
CONTENT
<div ng-repeat-end>ITEM FOOTER</div>
instead of one root element:
<div ng-repeat>CONTENT</div>
Related
I am new to webdriver and I am automating a site. In which I have to find a text on that page and I want to click on its parent div. Can anyone please help?
Below is the HTML code.
<div class="col-md-6 col-sm-6 col-lg-6">
<p>
<strong class="detailShow ng-binding" ng-click="showJobs('NonInvite',item.taskId)"> TEST CR1 START DATE </strong>
</p>
</div>
The easiest way to achieve this is directly using xpath.
You can choose the 'more ugly' way like this:
.//strong[contains(#class,'detailShow')]/../..
Explanation:
/.. - this is how you get the parent element. Having just one, means that you'll get the <p> tag, so to get the <div> you need another one.
Or, you can go in a better manner like this:
.//strong[contains(#class,'detailShow')]/ancestor::div[#class='col-md-6 col-sm-6 col-lg-6']
Explanation:
ancestor::div - this one goes up until and returns all parent that are <div> tags. Since you need only the first <div> parent, you need to specify which one, therefore: ancestor::div[#class='col-md-6 col-sm-6 col-lg-6']
Now, if the bootstrap class is your only identifier, and there is a chance you may be inside a <table> you can also go with ancestor::div[1]
Is it possible to have more than one ng-repeat on the same element (i.e. not nested)?
Like so:
<section ng-repeat="clusterA in foo.barA.clusters" ng-repeat="clusterB in foo.barB.clusters">
I want to use an ng-if to display clusterA and clusterB in the same row if they have the same name. Conceptually it would look something like this fiddle.
You could ng-repeat over clusterA and use $index to check the same record in clusterB.
Something like:
<section ng-repeat="clusterA in foo.barA.clusters">
<span class="col-md-6">clusterA</span>
<span ng-if="clusterA == foo.barB.clusters[$index]" class="col-md-6">foo.barB.clusters[$index]</span>
</section>
I can't seem to make my multiple dropdowns to work.
<div ng-repeat="i in [0,1,2,3,4] track by $index">
<select ng-model="myArray[i]" ng-options="someList"></select>
</div>
In the html the result is ... ng-model="myArray[i] instead of ng-model="myArray[0] etc.
I have tried curly brackets but it doesn't work. closest thing was ng-model="myArray['{{ i }}'] but that' not really what I want.
Edit: Here is a fiddle to illustrate.
http://jsfiddle.net/dpkzzyug/1/
You need to examine the HTML to see that the result literally writes out i (or $index in this case) instead of the value.
The code that you have works, but the problem is that myArray is local to the ng-repeat scope. You need to make sure that myArray exists outside of this scope.
Something like the following will work:
<div ng-app ng-init="someList=[1,2,3]; myArray = []">
<div ng-repeat="i in [0,1,2,3,4] track by $index">
<select ng-model="myArray[i]" ng-options="i for i in someList"></select>
http://jsfiddle.net/778x0pm0/1/
I would personally prefer to use the controller as syntax since this makes this a little clearer:
<div ng-app=app ng-init="someList=[1,2,3]">
<div ng-controller="ctrl as ctrl">
<div ng-repeat="i in [0,1,2,3,4] track by $index">
<select ng-model="ctrl.myArray[i]" ng-options="i for i in someList"></select>
http://jsfiddle.net/778x0pm0/
I just realized that the html will write out i / $index even though the logics of angular still work. I was having problems elsewhere and thought it was because of this.
I still want {{1+2}} to be evaluated as normal. But in addition to the normal interpolator, I want to create a custom one that I can program to do whatever I want.
e.g. <p>[[welcome_message]]</p> should be a shortcut for <p>{{'welcome_message' | translate}}</p>, or <p translate="welcome_message"></p>. That way, i18n apps would be much more convenient to write.
Is anything like that possible? I'm currently going through the angular.js source code, but the interpolation system looks pretty complicated(?). Any suggestions?
I created a directive that regex-find-replaces it's innerHTML. Basically, I can rewrite any text into any other text. Here's how I did it:
How do I make angular.js reevaluate / recompile inner html?
Now all I have to do is to place my directive-attribute, "autotranslate", in one of the parent elements of where I want my interpolator to work, and it rewrites it however I want it! :D
<div class="panel panel-default" autotranslate>
<div class="panel-heading">[[WELCOME]]</div>
<div class="panel-body">
[[HELLO_WORLD]
</div>
</div>
becomes
<div class="panel panel-default" autotranslate>
<div class="panel-heading"><span translate="WELCOME"></span></div>
<div class="panel-body">
<span translate="HELLO_WORLD"></span>
</div>
</div>
which does exactly what I wanted.
I don't think that's possible, but if you really want to save some characters you could create a function on your rootScope called t, then call it within your views:
<p>{{ t(welcome_message) }}</p>
I have got a number of components/windows (divs) on my html page; each div meant to show a large amount of data. Am trying to use nginfinite-scroll (http://binarymuse.github.io/ngInfiniteScroll/documentation.html) on each of these components so that infinite scrolling happens inside each of them. But looks like the infinite-scrolling is triggered only when an element on which the nginfinite-scroll is called nears the end of the browser-window. But i can't have my components move. How do i get infinite scroll happen in-place, i mean inside each component/element whose position would not near the browser end? Hope, the problem statement is understood.
Here's my html:
<div id="myDiv">
<ul class="list" infinite-scroll='nextPage()' infinite-scroll-disabled="false">
<li data-ng-repeat="item in items">
<span>{{item}}</span>
</li>
</ul>
</div>
Regards