I have a code that I generate using Python's Mako templates:
<ul class="list-group">
% for t in list:
<li class="list-group-item">
<div
ng-class="hover ? 'btn btn-xs btn-default' : ''"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false"> ${list.data} </div>
</li>
% endfor
</ul>
All I want is that the row I'm hovering of - will be converted to a button.
Problem is that I see a list of rows ,but when the mouse hover on one of the elements - all elements are affected instead of the specific <li> element I was hovering of , like all the text inside all the rows are converted to buttons.... any idea what am I missing ?
Your hover variable is being assigned in the global scope. Using ng-repeat fixes this because each template instance gets its own scope.
To fix this without ng-repeat you can namespace the hover property within the list object, like in this Plunker.
Related
I am using ng-repeat on a <tr> tag to populate the <td> tags with data pulled from mysql and converted into Json. This works just fine. However, one of the <td> tags that I'm using contains a button.
What I would like to do, is have each of these buttons identified somehow in the DOM, so that I can target then with specific requests.
Example: Page loads, ng-repeat repeats a button 4 times. Each of these buttons would have an ng-click attached to it. I want each of them to open and filter different information in a json file.
Am I correct in assuming that ng-repeat would simply open the same item for each button, and how would I go about making them seperate? thanks.
You can do something like this on the front-end:
<button ng-repeat="item in items track by $index" ng-click="someFunction($index)" >Something happens</button>
Then in your controller:
$scope.someFunction = function (index) {
if (index === 1):
// etc.
else...
// Or use switch, whichever works for you.
You could create the specific function on each item in the array.
<button ng-repeat="button in buttons" ng-click="button.functionName()">{{button.name}}</function>
There's $index for that. It's a very good habit to take for any of your ng-repeat. Also don't forget bind-once if your buttons UI isn't subject to modifications once the DOM has loaded.
<ul>
<li ng-repeat="page in pages">
<a ng-class="{ testClass: $index == pageNumber }" ng-click="setPageNumber($index)">{{ page }} - index is : {{$index}}</a>
</li>
</ul>
http://jsfiddle.net/bonatoc/4z1t4gsm/3/
Also you could do (using bind-once):
<button
ng-repeat="button in ::buttons track by $index"
id="button_{{$index}}"
class="{{button['css_class']}}"
...given your buttons were a JSON object as well (beware, ng-repeat likes arrays, not objects. Arrays of objects are fine):
$scope.buttons = [
0: {
'css_class': someClass,
'functionToTrigger': function(...
// ...
I have a Bootstrap-UI accordion group that generates individual accordion menus using ng-repeat. The content under each accordion is also generated using a nested ng-repeat.
<accordion close-others="false">
<span data-ng-repeat="category in categories">
<accordion-group is-open="filterText.length > 0">
<accordion-heading>{{category}}: {{reportList.length}} Items </accordion-heading>
<div>
<ul>
<li data-ng-repeat="report in reportList = (getReports($parent.$index) | filter: filterText)">{{report}}</li>
</ul>
</div>
</accordion-group>
</span>
</accordion>
The content generated by the second ng-repeat needs to be searchable. When the search is executed, accordions that contain matching values should open and display the matching values. I know that the outside ng-repeat sees the filtered array and its length because i can display the length value in the view (i.e. {{reportList.length}} updates when the filter executes).
The problem comes when i try to put the reportList.length value in the is-open attribute of an <accordion-group>. Using is-open="reportList.length" seems to pass the literal into the directive. In desperation, I tried using is-open="{{reportList.length}}" but that throws the expected syntax error.
Here's a plunker that shows what i have working as well commented out lines that show the way i think it should work (lines 22 & 23). Any suggestions are more than welcome.
Your binding is-open inside of an ng-repeat which creates a child scope for each item (category). You need to bind to $parent.filterText.length as filterText is not a category property.
What you bind the is-open to, Angular needs to be able to assign to it, not just evaluate it. It can evaluate an expression like "foo == 5" but it cannot assign to it.
What I do is create a variable and bind to that, then the accordion can change it, and I can change it, and everybody's happy.
$scope.accordionSettings = {
IsOpen: {
Section1: true,
Section2: false
}};
In the markup:
<div uib-accordion-group is-open="accordionSettings.IsOpen.Section1">
... more markup ...
<div uib-accordion-group is-open="accordionSettings.IsOpen.Section2">
have this ng-repeat
<li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="question in questions">
<div>
<span class="tmmenu-admin-tabs-builder-panel-portlet-toggler" ng-click="tatbppTogler()">{{{tatbppt}}}</span>
<span class="tmmenu-admin-tabs-builder-panel-portlet-number">{{question.id}}</span>
{{question.text}}
</div>
<div class="tmmenu-admin-tabs-builder-panel-portlet-options" ng-show="showTatbppo">
...
</div>
</li>
I want, for click in "tmmenu-admin-tabs-builder-panel-portlet-toggler" change visibility "tmmenu-admin-tabs-builder-panel-portlet-options" and change text in "tmmenu-admin-tabs-builder-panel-portlet-toggler".
And i write this code for get result:
$scope.tatbppTogler = function(){
$scope.showTatbppo = !$scope.showTatbppo;
if($scope.showTatbppo){
$scope.tatbppt = "-";
}else{
$scope.tatbppt = "+";
}
}
It's works, but changed dom in all "Li", how changed only current (where user click) "li"?
You can do it like this:
<li class=portlet" ng-repeat="question in questions">
<div>
<span class="toggler" ng-click="showTatbppo=!showTatbppo">{{showTatbppo ? "+" : "-" }}</span>
<span class="number">{{question.id}}</span>
{{question.text}}
</div>
<div class="options" ng-show="showTatbppo">
...
</div>
</li>
Working fiddle, with this concept:
http://jsfiddle.net/x1nguaxj/
btw. You have very-very-very long css class names :)
1 way
you can pass this in ng-click="tatbppTogler(this)" and then in function manipulate with this
2 way
you can create custom directive and apply it to your li element and then on this directive bind click to element and listen , and on click function will be triggered your listener and you will have access on this element
You can create an attribute id for each question and then change based on the id of the question you clicked
I would suggest you'd take a look at $index. From the angularjs docs:
iterator offset of the repeated element (0..length-1)
Using this, you can clearly determine the certain div that was clicked on.
I have a lot of data within ng-repeat. It looks like table with many rows and columns. I want to put ng-click directive on some of cell of table.
Can i put some condition before ng-click directive? If this condition is true - I want to put the directive, otherwise - not to put.
I think you should just put the directive in there and pass it a condition as a parameter which returns boolean. In the directive compile function check if your parameter is right and decide from there what you load.
Maybe this is what you were looking for?
<ul class="menuItems">
<li ng-repeat="item in menuItems">
<div ng-if="item.type == 'link' ">
{{item.name}}
</div>
<div ng-if="item.type == 'function' ">
<span ng-click="function(item.command)" title="item.description">{{item.name}}</span>
</div>
</li>
</ul>
i repeat things in ng repeat like so
<div class="" ng-repeat="deutscheBankEvent in deutscheBankEvents">
<div class="schrottler-opened schrottler" title="">
<span class="presse_ueber" style="font-size:22px;margin-left:10px;font-weight: normal;margin-top:5px">{{deutscheBankEvent.name}}</span>
</div>
<!-- data-ng-repeat also possible-->
<div class="">
<div class="presse_content">
<Div style="color:white">{{deutscheBankEvent.name}}</div>
<ul class="liste_k">
<li ng-repeat="list in deutscheBankEvent.list">
{{list}}
</li>
</ul>
</div>
</div>
later down the code comes up a form to register to events. the form is hidden until user selects a place and date via select. this is triggered like so:
<span ng-show="myForm.locationDate.$valid">
my issue now is: this shows up all hidden form elements when one select is valid.
how can i set the scope to only this one changed?
Since ng-repeat creates a new scope, changing ng-show/ng-hide conditions to scope bound properties will work perfectly (example).