I have an Angular page with a grid-like view. Inside each row is an input element:
<div class="grid">
<div class="group" ng-repeat="(key, value) in groups | groupBy: groupingFunction>
<div class="row" ng-repeat="row in value">
<input type="text" ng-model="row.name">
</div>
</div>
</div>
I want to tab through all the input elements in order. This more or less works, except that Angular will redraw the elements when I tab out of the first input element, resetting the focus to somewhere outside the grid. When I quickly press tab several times, I can usually reach the 5th or so element before that happens, so the tab order itself is working. My question is, how do I prevent Angular from (seemingly unnecessarily) redrawing part of my grid?
I tried delaying the view updates for the input, as suggested in this question, but the redraws still happen. So, it looks like something else is causing them. Any suggestions on how to find out what, would be appreciated.
Related
This works on Chrome, FF and Safari. In Edge when I left click in the input field, it seems that on the mouseup event the input loses focus and the cursor leaves the input to some random element above. I can tab into this input and I can right click to bring up the copy/paste menu, click elsewhere on the page, and the cursor stays in the input.
<div class="card" ng-repeat="prod in product" ng-if='ngCart.itemInCart(prod.id)'>
<div id="{{prod.id}}" count="{{prod.count}}" class="card-info col-md-12" ng-click="showInfo(prod.id)">
<div ng-if="prod.count == 0" class="info-form pink-active col-md-12">
<div ng-if="prod.id == '11'" class="col-md-12">
<input type="text"/>
</div>
</div>
</div>
</div>
Any idea how I can troubleshoot this? Again, it works perfectly in other browsers. Client is using Edge, so I have to fix this.
UPDATE: If I left click in the input and move the mouse outside the input before I release the left button, the cursor stays in the input, again the mouseup event is what's breaking this. Thanks!
I have a repeater that creates 3 directives. Each directive has its own carousel type of functionality and each has its own collection. When the carousel of the first directive changes, I want to trigger a change in the second carousel by giving the second carousel a new collection to work with.
How do I go about finding the second mission-descendant-directive's that gets created?
<div ng-repeat="mission in carouselMissions track by mission.missionDefinitionId">
<div class="row">
<mission-descendant-directive header="header" data-id="mission.missionDefinitionId" data-level="1" subChild="subChild.id"></mission-descendant-directive>
</div>
</div>
Hi I have a ribbon with some div's in a row within. If it overlaps and you can not see everything, I show an arrow left from the ribbon and an arrow right of the ribbon. With this arrows I can scroll throught the ribbon infinite in the circle (direction left or right).
My codes lookes like this:
<div class="arrow" ng-click="list.push(list.shift())>←</div>
<div class="ribbon">
<div class="ribbonItem" ng-repeat="item in list">
{{ item.Name }}
</div>
</div>
<div class="arrow" ng-click="list.unshift(list.pop())>→</div>
This works, but it's without an animation and increased. It also needs much clicks to scroll throught. How can I implement an animation without using jquery or js and just do it with this ng-click. I tried it with a transition on the css-classes ng-enter/ng-leave of my ng-repeat, but it does'nt work: https://docs.angularjs.org/api/ng/directive/ngRepeat (look at "Animations").
Has someone an idea?
Thanks.
Similar question : how to use animation with ng-repeat in angularjs
Go through this link it might help you:
http://www.nganimate.org/angularjs/ng-repeat/move
I am new to AngularJS. Right now I have a reusable carousel widget that I modified to display 2 slides in one frame (I make my carousel as a directive so I can use it anywhere). I am using carousel component from angular-ui-bootstrap, and I modified it according to the way explained in this post.
However, I am planning to modify my current carousel widget to accept a number that will determine how many slides will be displayed in 1 frame, and dynamically changes its display.
For example, if 3 is passed, then 3 slides will be displayed in 1 frame.
The way I have my 2-slides-in-1-frame carousel widget is pretty static (the number of slides shown in 1 frame is already defined in its HTML). Is it possible to do this? Any help is really appreciated! Thanks.
There is no need to modify the angular-ui-bootstrap carousel, just display a row with two or three columns inside the carousel.
This is a my fork of the original angular-ui-bootstrap carousel plunkr:
http://plnkr.co/edit/F2h3gIQKzpkjymZDgrK6
The short version is:
<slide ng-repeat="slide in slides" active="slide.active">
<div class="row">
<div class="col-xs-6">
... first cell
</div>
</div>
<div class="row">
<div class="col-xs-6">
... second cell
</div>
</div>
</slide>
Then what you can do is create your own templating directive that does the math on how many columns to display (2 = col-xs-6, 3 = col-xs-4, ... ) and renders the above partial with the appropriate column classes.
In my Angular project, I have a recursive template that creates a series of "blocks" (each consisting of an encompassing div with other elements inside it) nested a few levels deep - similar to this one:
<script type="text/ng-template" id="myTemplate.html">
<div drop-target='true' class="overall">
<h2> {{obj.title}} </h2>
<div> {{obj.content}} </div>
<div ng-include="'myTemplate.html'" onload="obj=someObject.innerObjects"></div>
</div>
</script>
Each of these overall divs has a directive that lets it accept items that are dragged into it (standard drag and drop).
The problem is, that the dropping is also being allowed to happen onto the <h2> element and the content div. This is not what I want. I want the dropping to only be over the overall div.
Any ideas on how to do that?