I want to take the $index from the repeater and save it on the current node in a prop called sort.
somehow like this
<li ng-repeat="node in rootNodeLst | orderBy:'node.Sort'"
ng-include="'nodes_renderer.html'" ng-mode=['node.Sort' = $index]></li>
where the line below shows what to focus on here.
ng-mode=['node.Sort' = $index]
So. Take the ng-repeat index, and save it on the current child node's prop called Sort.
the reason behind this is that i need to have the sort updated when i move the elements in the <li>
can this be done?
In your ng-repeat directive add ng-init like this
<li ng-repeat="node in rootNodeLst" ng-init="node.Sort = $index">
{{ node.Sort }}
</li>
http://plnkr.co/edit/WeUeBxGBJVUYErWY3hAX
Related
How does one force a directive to update if it nested in a ng-repeat which has a filter?
Input Box
<input type="text" class="name-search" ng-model="search.text">
HTML
<ul>
<li ng-repeat="user in users track by $index | filter:search">
<profile-photo user="user"></profile-photo>
<span>{{ user.name }}</span>
<li>
</ul>
As I type in the input box, the users filter properly but the profile-photo directive doesnt have the proper user.
Any help would be greatly appreciated!
Heres a dumbed down Plunker of my actual code. If you start typing, you will notice that it filters but the image doesnt update.
https://plnkr.co/edit/FWD2bFdIh7jQa5aqdkjrPlunker
your link's function code only executes once, when compiling the directive. After that, scope.photoUrl does not change even if you change the user, because you're not $watching the value. You can add a watch, or directly, use this in the template
ng-src="{{user.photoUrl}}"
I'm using angular-ui-tree.
The object I have in my treeview has a sort index. I am looking for a way to bind this sort index to the desIndex of the treeview scope, using something similar to this:
ui-tree-desIndex="node.sortIndex"
desIndex is the treeview node's index and node.sortIndex is my object's index.
I want it to sort my list by my objects' values, and when I move an object in the treeview the scope will update that object's index like this:
<div ui-tree="treeOptions" callbacks="treeOptions">
<ol ui-tree-nodes="" data-nodrop-enabled="true" ng-model="rootNodeLst" callbacks="treeOptions" id="tree-root">
<li ng-repeat="node ui-tree-desIndex="node.sortIndex" in rootNodeLst" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
The code above isn't working, how can I fix it?
Change this
<li ng-repeat="node ui-tree-desIndex="node.sortIndex" in rootNodeLst" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
To this
<li ng-repeat="node in rootNodeLst" ui-tree-desIndex="node.sortIndex" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
For starters, to get your ng-repeat working.
Then, if ui-tree-desIndex does not get the value set, you can try:
ui-tree-desIndex="{{node.sortIndex}}" or ng-attr-ui-tree-desIndex="{{node.sortIndex}}"
See this JSFiddle.
Funny thing.
Found out that the way im building the treeview with the nested html modify my $index to show this sort number, so, anyway. thanks for your time and helå
Currently I'm using a ng-repeat to go over some json data to produce an unordered list. I have a ng-click handler on each list item, which when clicked I need to gather all the data from the current list item clicked (including the item.things (array)) and send it over to a below referenced 'delete' function.
I thought passing $event would do it but I can't seem to find the data in it.
Example:
<ul>
<li ng-repeat="item in items" ng-click="delete($event)">
{{item.id}}
<span ng-repeat="thing in item.things">
{{thing.id}}
</span>
</li>
</ul>
Which produces:
Item 1
Thing X
Thing Y
Item 2
Thing X
Thing Y
..etc etc
<li ng-repeat="item in items" ng-click="delete(item)">
This should work.
Good morning,
I'm trying to change the limitTo filter on a certain list, my issue is:
when I click to the trigger who change the filter limit the filter changes on all ng-repeated categories.
my function inside the main controller
$scope.showMore = function(limit) {
if($scope.limitItems === $scope.itemsPerList) {
$scope.limitItems = limit;
$scope.switchFilterText = 'less';
} else {
$scope.switchFilterText = 'more';
$scope.limitItems = $scope.itemsPerList;
}
}
my scenario (I rewrote it in a simplified version)
<li ng-repeat="item in category.items | limitTo: limitItems ">
{{item.title}}
</li>
<li ng-if="limitItems < (category.items.length)">
<a ng-click="showMore(category.items.length)" >Show {{ switchFilterText }}</a>
</li>
Could you explain me what's wrong with me?
I searched how to select a single element to apply the function but I didn't find anything useful
Update:
I found the way to solve my issue in this way:
No functions inside the controller are involved to make this functionality works properly:
<li ng-repeat="category in maincategories" ng-init="limitItems = maxItemsPerList">
{{category.title}}
<ul>
<li ng-repeat="item in category.items | limitTo: limitItems "> {{item.title}}
</li>
</ul>
<a ng-click="limitItems = category.items.length" href>
<b ng-if="category.items.length > maxItemsPerList && limitItems != category.items.length "> Show more </b>
</a>
I'm not really convinced about Angular (I used it in my past and I was impressed by the performance but now I can see logics senseless):
What I learned:
ng-if and ng-click cannot be used in the same content because ng-if creates new scopes so if you put ng-if on top of the "show more" link it will break the code
ng-init cannot be used in the same element of the ng-repeat otherwise the var initialised will not be available inside the ng-repeat block
I think there is another way to do that, maybe more clean but in this specific case I can't do a lot.
ng-if and ng-click cannot be used in the same content because ng-if
creates new scopes so if you put ng-if on top of the "show more" link
it will break the code
Yes, ng-if creates a new scope, but it is possible to mix ng-if and ng-click (and most other directives). To do that, you'll be safer if you always write to atributes of another object instead of a simple variable. It is plain JavaScript prototypal inheritance in play.
<li ... ng-init="category.limitItems = maxItemsPerList">
ng-init cannot be used in the same element of the ng-repeat otherwise
the var initialised will not be available inside the ng-repeat block
True, in the sense that variables are created in the local scope. But again, refer to an object.
I think there is another way to do that, maybe more clean but in this
specific case I can't do a lot.
You don't need to do a lot, it is quite simple to do it right actually.
Some advices:
Use ng-init with care. I know it will tempt us but always try to put logic inside controllers and services;
Avoid assignments inside templates;
Learn how to use controllerAs syntax. It gives you an object to write your models to (the controller), so solves most problems related to scope inheritance;
Do not inject $scope, put your view models inside controllers.
Full code goes like this:
<li ng-repeat="category in maincategories" ng-init="category.limitItems = maxItemsPerList">
{{category.title}}
<ul>
<li ng-repeat="item in category.items | limitTo: category.limitItems "> {{item.title}}
</li>
</ul>
<a ng-if="category.items.length > maxItemsPerList && category.limitItems != category.items.length" ng-click="category.limitItems = category.items.length" href>
<b> Show more </b>
</a>
The following code doesn't work -
<div ng-init="selected=-1">
<ul ng-repeat="x in arr">
<li ng-click="selected = $index">...</li>
</ul>
When I click on one of the lis, the variable selected remains as -1. But the following does work -
<div ng-init="selected=-1">
<ul ng-repeat="x in arr">
<li ng-click="setTo($index)">...</li>
</ul>
$scope.setTo = function(index){selected = index;}
Why is that? Nothing functional seems to have changed.
ng-repeat directive creates it's own scope for each item in arr, so when expression selected = $index is executed, the new property selected is created on that scope, at the same time parent scope remains untouched.
Is why your selected property does not change in the first case.
Since the ngRepeat directive creates its own scope, you need to refer to $parent.selected in the first example:
<li ng-click="$parent.selected = $index">
http://plnkr.co/edit/9iUgp57KwvrlC3TDO3YC?p=preview