I want do some modification with code or with directive to allow:
Limit dragging only vertically(by Y axis)
Make possible to pick up item for dragging only in one place of the
element.
I'm using implementation of this directive. https://github.com/marceljuenemann/angular-drag-and-drop-lists
<ul dnd-list="list.value"
class="list-group"
dnd-allowed-types="['entry']"
dnd-dragover="overItem()"
>
<li ng-repeat="entry in list.value"
dnd-draggable="entry"
dnd-moved="list.value.splice($index, 1)"
dnd-effect-allowed="move"
dnd-type="'entry'"
dnd-dragstart="selectedItem(entry, list.value)">
<div>
<div class="numeric-column">{{$index + 1}}</div>
<div class="col-md-5">{{entry.id}}</div>
<div class="col-md-5">{{entry.name}}</div>
</div>
</li>
</ul>
This code working fine.
Question: can i restrict li element to move only verticaly.
Example: http://jqueryui.com/draggable/#constrain-movement
Related
I'm using angular 1.4.8. I want to save filtered result from ng-repeat and use it to determine whether to enable a "load more" button at the bottom of the list. I have looked at this question:
AngularJS - how to get an ngRepeat filtered result reference
And many others, they suggest to use "as alias" from ng-repeat, here's what my code looks like:
<ul class="media-list tab-pane fade in active">
<li class="media">
<div ng-repeat-start="item in items | limitTo: totalDisplayed as filteredResult">
{{item}}
</div>
<div class="panel panel-default" ng-repeat-end>
</div>
<div>
{{filteredResult.length}}
</div>
</li>
</ul>
<button ng-click="loadMore()" ng-show="totalDisplayed <= filteredResult.length">
more
</button>
However, I found filteredResult.length is displayed fine right after ng-repeat, but the button is never shown. If I try to display filteredResult.length in where the button is, it will show null.
So is there a rule for "as alias" scope? I've seen plenty of examples work but mine doesn't, what am I missing here?
EDIT:
The accepted answer uses controllerAs which indeed will resolve the problem. However, charlietfl's comment using ng-init to save filteredResult to parent scope is also very neat and that's the solution I use in my code eventually.
Probably some of classes in your <ul class="media-list tab-pane fade in active"> or <li class="media"> is selector for a directive that would have its own scope. So you store filteredResult in e.g. tab-pane's scope and then try to have access out of it's scope in outside of ul tag.
Try to use Controller as instead of scope:
angular
.module('plunker', [])
.controller('MainCtrl', function() {
vm = this;
// make an array from 1 to 10
var arr = [];
while (arr.length < 10) {
arr.push(arr.length + 1)
};
vm.items = arr;
vm.totalDisplayed = 5;
vm.filteredResult = [];
});
<body ng-controller="MainCtrl as main">
{{main.items}}
<ul class="media-list tab-pane fade in active">
<li class="media">
<div ng-repeat-start="item in main.items | limitTo: main.totalDisplayed as filteredResult">
{{item}}
</div>
<div class="panel panel-default" ng-repeat-end>
</div>
<div>
filteredResult = {{main.filteredResult = filteredResult}}
</div>
</li>
</ul>
<button ng-click="loadMore()" ng-show="main.totalDisplayed <= main.filteredResult.length">
more
</button>
</body>
http://plnkr.co/edit/drA1gQ1qj0U9VCN4IIPP?p=preview
I have this HTML
<div class="pageContent">
<aside class="left-cont">
<ul class="btn-menu" >
<li ng-repeat="tab in tabs" ><a class="ng-scope ng-binding" href="#" ng-click="show={{tab.id}}"> {{tab.name}}</a> </li>
</ul>
</aside>
<section class="main-content" ng-show="show === 1">
<h1> {tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
<section class="main-content" ng-show="show === 2">
<h1> {{tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
<section class="main-content" ng-show="show === 3">
<h1> {{tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
</div>
And I have three problems with it:
1)ng-click="show={{tab.id}}"shows me the right id number in the dom, for instance, id=1 does show <a class="ng-scope ng-binding" href="#" ng-click="show=1">but I do get an error in my console - Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=%7B&p1=invalid%20key&p2=7&p3=show%3D%7B%7Btab.id%7D%7D&p4=%7Btab.id%7D%7D Why is that? I have tried to to write tab.id instead of {{tab.id}}, but it doesn't even fetch the element.
2) I want the section tags to be appended whenever there's a click on the a, but I can not do so since the section tags aren't wrapped in the li tags (when I do put them in the li they do fire, but that's not what I want). How do I bind these two different elements?
3) I want each section to append the content of its specific tab for the section that has - ng-show="show === 1" I want tab.title and tab.content of the tab that has the id=1, and so on..
How is that all possible?
Help is very much appreciated here
#HarishR is right: this is not the AngularJS way to do things. The imperative way of doing things would be to have an ng-click set the isActive property to true on an instance of tab.
Then the directive would would watch the isActive property and change class accordingly.
Since you probably don't want to reinvent the wheel, you could consider using Angular strap ( http://mgcrea.github.io/angular-strap/#/tabs#tabs ) or check out this code https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js.
Today I faced a strange problem for me in AngularJS.
In this example I have two ng-repeat in product (two or three images and the same number of colors) and one ng-repeat for pagination (irrelevant in this case I assume).
HTML:
<div class="item-wrapper" ng-repeat="item in pagedItems[currentPage]">
<div class="item">
<!-- Item image -->
<div class="item-image">
<ul>
<li ng-repeat="desc in item._source.description" ng-show="$first">
<img class="preview" ng-src="server/{{desc.smallImage.url}}">
</li>
</ul>
</div>
<!-- Item details -->
<div class="item-details">
<div class="product-colors">
<ul class="btn-group pull-right">
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" />
</li>
</ul>
</div>
</div>
</div>
All I wanted to do is that click on one of colors (img.color) changes corresponding img.preview visibility. In my attempts I was always able to changed every img.preview in whole list, not the one I clicked on.
MY ATTEMPTS:
HTML
<li ng-repeat="desc in item._source.description" ng-show="$index === selectedColor">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index)">
JS (controller)
$scope.changeColor = function(idx) {
$scope.selectedColor = idx || 0; //default show always first img.preview from list
};
MY ATTEMPTS #2 (working)
HTML
<li><img class="preview" ng-src="server/{{desc[__selected === $index ? __num : 0].smallImage.url}}">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index, key)">
JS (controller)
$scope.changeColor = function(idx, key) {
$scope.__selected = key;
$scope.__num = idx;
};
This might be quite simple:
Considering desc and color will be referring to same object as they are of the same source.
So, desc and color should be identical and setting a property on either of them supposed to reflect on the other.
Make the changes as follow and try, havent tested though:
<li ng-repeat="desc in item._source.description" ng-show="item.__selected ? desc==item.__selected : $first">
and
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" ng-click="item.__selected = color" />
</li>
I have a set of <li> elements.
<ul>
<li ng-class="{current: selected == 100}">
<a href ng:click="selected=100">ABC</a>
</li>
<li ng-class="{current: selected == 101}">
<a href ng:click="selected=101">DEF</a>
</li>
<li ng-class="{current: selected == $index }"
ng-repeat="x in [4,5,6,7]">
<a href ng:click="selected=$index">A{{$index}}</a>
</li>
</ul>
When a user clicks on one of the address elements above then then it should, set the value of selected and show one of the <DIV> elements below:
<div ng:show="selected == 100">100</div>
<div ng:show="selected == 101">101</div>
<div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>
This works for the first two cases.
When the user clicks ABC then the first <DIV> shows 100 and changes color to red.
When DEF is clicked then 101 shows and DEF changes to red.
However it does not work at all for A0, A1, A2 and A3
When a user clicks A0, A1, A2 or A3 then the correct does not show, the selected value is not set and the color of ALL the ng-repeat A0,A1,A2 and A3 turn to red.
This is best shown if you look at this Plunker:
http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview
Note that at the top I have added {{ selected }} as a debug aid at the top. Also the x in [4,5,6,7] are just meant to simulate a loop. In real life I have this as ng-repeat="answer in modal.data.answers".
Does anyone know how I can set this up so that the li class current is set at the right time and the DIV shows at the right time for the A0, A1, A2 and A3 <li> and <DIV>
The issue here is that ng-repeat creates its own scope, so when you do selected=$index it creates a new a selected property in that scope rather than altering the existing one. To fix this you have two options:
Change the selected property to a non-primitive (ie object or array, which makes javascript look up the prototype chain) then set a value on that:
$scope.selected = {value: 0};
<a ng-click="selected.value = $index">A{{$index}}</a>
See plunker
or
Use the $parent variable to access the correct property. Though less recommended as it increases coupling between scopes
<a ng-click="$parent.selected = $index">A{{$index}}</a>
See plunker
As johnnyynnoj mentioned ng-repeat creates a new scope. I would in fact use a function to set the value. See plunker
JS:
$scope.setSelected = function(selected) {
$scope.selected = selected;
}
HTML:
{{ selected }}
<ul>
<li ng-class="{current: selected == 100}">
<a href ng:click="setSelected(100)">ABC</a>
</li>
<li ng-class="{current: selected == 101}">
<a href ng:click="setSelected(101)">DEF</a>
</li>
<li ng-class="{current: selected == $index }"
ng-repeat="x in [4,5,6,7]">
<a href ng:click="setSelected($index)">A{{$index}}</a>
</li>
</ul>
<div
ng:show="selected == 100">
100
</div>
<div
ng:show="selected == 101">
101
</div>
<div ng-repeat="x in [4,5,6,7]"
ng:show="selected == $index">
{{ $index }}
</div>
The following code display all the divs one after another :
<ul class="record">
<li id="{{record.id}}" ng-repeat="record in records">
<div> Widget Code.... </div>
</li>
</ul>
Apart from this I have following clickable list menu at the right side in a drop down fashion :
<li ng-repeat="choice in items">
{{choice}}
</li>
Now on click of each list item i want to add the same <div> Widget Code.... </div> which append the existing divs on the page.
My recent view is as following now i want to add div on click of each of list item just after the existing divs.
Need Help. Thank you.
This should do the trick:
<li ng-repeat="choice in items">
{{choice}}
</li>
And then in your controller:
var addRecord = function(){
$scope.records.push({id: 10}); // change to generate your own id
};