I am trying to add swipe functionality to a ng-repeated list of elements. However, the swiping works badly. Sometimes a swipe gestures (all on desktop) is recognized, but most of the times I'm click and swiping like a madman to achieve the expected result.
I am using Material Angular.
Code:
<div ng-repeat="link in Links | filter: { category: 'quick' }">
<div ng-show="!link.show" md-swipe-left="link.show = true">
<div class="lv-item ">
<span href="{{link.url}}" class="no-select" target="_blank" >
<div class="lv-title" class="no-select">{{link.title}}</div>
<small class="lv-small" class="no-select">{{link.description}}</small>
</span>
</div>
</div>
<div ng-show="link.show" md-swipe-right="link.show = false">
<div class="lv-item delete" >
<button ng-click="deleteLink(link.id)">Verwijder</button>
</div>
</div>
</div>
On the Angular Material swipe docpage (https://material.angularjs.org/latest/demo/swipe) it seems easy and it works like a charm. However my implementation of the directive doesn't seem to work as it should. It rather lets me select the text inside the element than swiping.
Also, I'd rather want the span to be a a href, but this only lets me drag the whole element out of space.
I believe that to assure a proper work of all material function you should use their containers and directives instead. So you should put all of that inside a md-content, and also use ng-ifs instead of ng-show on the swiped div. Which would result in something like that :
<md-content>
<div ng-repeat="link in Links | filter: { category: 'quick' }">
<div ng-if="!link.show" md-swipe-left="link.show = true">
<div class="lv-item ">
<span href="{{link.url}}" class="no-select" target="_blank" >
<div class="lv-title" class="no-select">{{link.title}}</div>
<small class="lv-small" class="no-select">{{link.description}}</small>
</span>
</div>
</div>
<div ng-if="link.show" md-swipe-right="link.show = false">
<div class="lv-item delete" >
<button ng-click="deleteLink(link.id)">Verwijder</button>
</div>
</div>
</div>
</md-content>
I used this kind of code snippet on some md-sidenav and it works. By the way, if you're using chrome and use mobile view, the md-swipe-left is always triggered, doesn't matter if you swipe left, right, top or bottom.
Hope this helps
Related
I have the following code snippet:
<div ng-hide="loading" ng-repeat="prov in providers">
<div data-toggle="collapse" style="position:relative;font-weight:bold;" data-target="#collapse-{{$index}}">{{prov.name}}
<div id="collapse-{{$index}}" class="collapse">
<div ng-repeat= "p in prov.subnets">
<div class="col-sm-7 col-md-7" style="font-weight:normal;font-size:90%">
{{p.zone}}
</div>
<div class="col-sm-5 col-md-5"><progress-bar></progress-bar></div>
</div>
</div>
</div>
</div>
I am attempting to make all the "p in prov.subnets" collapse into the relevant "prov.name". As you can see I have nested NG-repeats. If I run my code, it does collapse correctly the first time. However, If I expand them out and try and collapse them again It doesn't collapse and kind of "glitchily" shows a collapse animation.
I have used element inspector and it seems like $index is working correctly to name the divs. Has anyone any other suggestions?
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
<div class="list-group bg-light no-border list-group-opt no-radius m-b-none">
<a class="list-group-item" on-tap="enterIndividual">
<div class="primary-info"
<div class="pull-left w-1x">
<img src={{avatar}} class="w-full r-3x"/>
</div>
<div class="pull-left m-l intro">
<span class="text-lg font-bold text-black m-b-sm">{{name}}</span>
<i class="fa fa-user"></i>
<div class="text-muted long-intro">
<span>{{detail}}</span>
</div>
</div>
</div>
</a>
</div>
It works well in computer,but when I tested it in my mobile,it had no react for touching.But if I use on-click instead of on-tap,it performs pretty well.So I am puzzled with this problem.Are there any requirement to use on-tap.Oh,it still has a strange point.If I touch it above a half of the div,it can work.What's the problem?
First, there are some errors in the code:
close the div.primary-info tag
a-tags are not allowed (HTML5) to contain block elements (div) - usually not a problem, but can cause some and will definitely not validate.
I guess your problem is, that the a-tag enclosing everything does not have the proper height and width. Try to give it a background and u'll see how large the a-tag is actually rendered as the tappable area.
U can simply skip the a-tag and move your event on-tag to the div.primary-info
here is the plunker:
http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview
like an inbox.
<div class="col-xs-4 leftnav">
<button class="btn btn-primary btn-block">Add News</button>
<br>
<article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
<h4>{{x.title}}</h4>
<p>{{x.message | limitTo:numLimit}}</p>
Read More..
</article>
</div>
<div class="col-xs-8 main-content">
<h2>News</h2>
<hr>
<article ng-repeat="x in issues">
<h3 >{{x.title}}</h3>
<p>{{x.priority}}</p>
<p class="lead">{{x.author}} - 6/12/2014</p>
<!-- ng-if="x.author == 'Andy' " -->
<hr>
<p>{{x.message}}</p>
Read More
<hr>
</article>
</div>
having a list of items ng-repeat on the left, then selecting the main content (on the right) from the options, then displaying the full content as the main selection.
ng-if ? ng-show ?
not sure how well I've described this but it should be pretty obvious from the fiddle.
thanks in advance.
I modified your plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview
I create a currectIssue variable for your right content display.
In left content, Read More.. has been change to <a ng-click="showIssue(x)">Read More..</a>
updated plunk: http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview
well, you might consider:
- use another scope variable to display the selected item from the object
- I'd use ng-if in this case as that will create/destroy the content as needed
// controller
$scope.selectIssue = function(x) {
$scope.issue = x;
}
$scope.selectIssue($scope.issues['1']);
//view
<article>
<h3 >{{issue.title}}</h3>
<p>{{issue.priority}}</p>
<p class="lead">{{issue.author}} - 6/12/2014</p>
<div ng-if="issue.author == 'Andy'">
<hr>
<p>{{issue.message}}</p>
Read More
<hr>
</div>
</article>
I would like to use ng-switch because I do not want the other elements that I do not want to show to be part of the DOM. That is why i did not use ng-hide/ng-show. In the example below, I would like to only have the span tag be in the DOM without the div wrappers from the ng-switch. What is the best way to accomplish this?
<div ng-switch on="user">
<div ng-switch-when="true">
<span>One</span>
</div>
<div ng-switch-when="false">
<span>Two</span>
</div>
</div>
You can use the ng-switch directive as a custom element and not specify the div in the first place. For example:
<ng-switch on="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</ng-switch>
Here is a plunker to play around with: http://plnkr.co/edit/zni6raUWOguhQh9jDiY3
the solution provided by #ChrisAuer this still creates a wrapping element.
AFAIK you'd have to use a custome directive. You may want to use angular-ui if
<div ui-if="user">
<span>One</span>
</div>
<div ui-if="!user">
<span>Two</span>
</div>
Probably, in your case, you'd be fine using ng-show or ng-hide which only hide(display:none) the element - they don't remove it form the DOM.
<div ng-show="user"> <!-- same as ng-hide="!user" -->
<span>One</span>
</div>
<div ng-hide="user"> <!-- same as ng-show="!user" -->
<span>Two</span>
</div>
I would say use ng-if, like this:
<div>
<div ng-if="user==true">
<span>One</span>
</div>
<div ng-if="user==false">
<span>Two</span>
</div>
</div>
you can use <span> to prevent your html layout changing
because <span> is not like <div>, it won't take up any space.
<span ng-switch="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</span>