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
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>
I am using the Angular-chart.js package:
http://jtblin.github.io/angular-chart.js/
When I load the page, the legend at the bottom of the page shows, but the chart itself is not displayed.
I added divs to verify that the data is actually populated. Here is the code that I have so far:
<div>
<span>
vm.bvpsData -
</span>
{{vm.bvpsData | json}}
</div>
<div>
<span>
vm.bvpsLabels -
</span>{{vm.bvpsLabels | json}}
</div>
<div>
<span>
vm.bvpsSeries -
</span>{{vm.bvpsSeries | json}}
</div>
<canvas id="bvpsChart" class="chart chart-line" data-data="vm.bvpsData"
data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries">
</canvas>
When I run the page and look at the code, this is what is rendered in the html:
<div class="ng-binding"><span>vm.bvpsData -</span>[
[
"6.88",
"6.95",
"4.31",
"4.33",
"4.45",
"4.49",
"4.16",
"4.04",
"3.92",
"3.61",
"3.68",
"3.55",
"3.21",
"3.38",
"3.62",
"3.98",
"3.86",
"3.66",
"3.87",
"4.15",
"4.41",
"4.59",
"4.95",
"5.15",
"5.22",
"5.40",
"5.66",
"6.28",
"6.68",
"7.00",
"7.57",
"8.08",
"7.79",
"8.10",
"8.59",
"9.10",
"9.33",
"9.68",
"10.14",
"10.45",
"10.74",
"10.80",
"11.07",
"10.94"
]
]</div>
<div class="ng-binding"><span>vm.bvpsLabels -</span>[
"06/2004",
"09/2004",
"12/2004",
"03/2005",
"06/2005",
"09/2005",
"12/2005",
"03/2006",
"06/2006",
"09/2006",
"12/2006",
"03/2007",
"06/2007",
"09/2007",
"12/2007",
"03/2008",
"06/2008",
"09/2008",
"12/2008",
"03/2009",
"06/2009",
"09/2009",
"12/2009",
"03/2010",
"06/2010",
"09/2010",
"12/2010",
"03/2011",
"06/2011",
"09/2011",
"12/2011",
"03/2012",
"06/2012",
"09/2012",
"12/2012",
"03/2013",
"06/2013",
"09/2013",
"12/2013",
"03/2014",
"06/2014",
"09/2014",
"12/2014",
"03/2015"
]</div>
<div class="ng-binding"><span>vm.bvpsSeries -</span>[
"Book Value Per Share"
]</div>
<div class="chart-container">
<canvas id="bvpsChart" class="chart chart-line ng-isolate-scope" data-data="vm.bvpsData" data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries" width="929" height="0" style="width: 929px; height: 0px;"></canvas>
<chart-legend>
<ul class="line-legend">
<li><span style="background-color:rgba(151,187,205,1)"></span>Book Value Per Share</li>
</ul>
</chart-legend>
</div>
What am I doing wrong? Why is the chart not displaying?
I fixed the problem. I had the chart canvas in a div with an ng-show and kept it hidden until a stock was selected.
I changed it to an ng-if and everything worked perfect after that.
Can I place a conditional statement into the collapse directive for AngularUI?
I have the following setup, which has 3 radio-style buttons:
<div class="controls controls-row">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'meeting'">Meeting</button>
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'tour'">Tour</button>
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'other'">Other...</button>
</div>
</div>
<div class="controls controls-row">
<textarea class="span6" placeholder="Why are you here?" ng-model="textPurpose" collapse="{{ radioPurpose == 'other' }}"></textarea>
</div>
I would like textarea to show/hide according to the value of the radioPurpose buttons. I know the statement is evaluating to true at the appropriate time, but the directive always shows the textarea.
Copied answer from comment:
I haven't used AngularUI, but I'm guessing collapse expects an expression. Remove the curly braces: collapse="radioPurpose == 'other'"
Collapse is actually not the best way of doing a simple show/hide. A collapsed item has its height set to 0, rather than being set to display: none; it might not always have the effect you're expecting. I would suggest instead using ng-show or ng-hide.
http://docs.angularjs.org/api/ng.directive:ngShow
I saw that you solved it, and so did I and can share my JSFiddle; Toggle Collapse with Radiobuttons.
However, I see what S McCrohan mean, since I got a problem in my app. The collapse for the table did not work fully in my app first, since it collapsed but left the top row visible. It seems to require that you separate the divs, i.e. a div with collapse and a div with span# class, like following...:
<!-- START CHART AREA -->
<div collapse="chartCollapsed">
<div class="span12 well well-small">
<div id="chart_div" style="width: 600px; height: 400px;"></div>
</div>
</div>
<!-- END CHART AREA -->
<!-- START TABLE AREA -->
<div collapse="tableCollapsed">
<div class="span12">
<!-- TABLE OMITTED -->
</div>
</div>
<!-- END TABLE AREA -->