I tried using ng-repeat value,group1,group2
i'm getting
grp1
grp2
abc
def
value1
value2
I need
grp1
abc
valu1
grp2
def
valu1
Html:
<ul>
<li ng-repeat="heading in group1"> {{heading}} </li> // heading
<li ng-repeat="subheading in group2"> {{subheading }} </li> // sub heading
<li ng-repeat="val in value"> {{val}} </li> // value
</ul>
JavaScript:
$scope.group1 = [grp1,grp2];
$scope.group2 = [abc,def];
$scope.value = [value1,value2];
The template would not use $scope directly. It would be something like this:
<ul>
<li> {{ keys[0] }}</li> // heading
<li> {{ keys[1] }}</li> // sub heading
<li> {{ result }}</li> // values
</ul>
Scope is implied in the template and {{ }} are used for interpolation.
Related
In AngularJS 1.6.3 it is basically possible to nest ng-repeat.
I have determined, that in two nested ng-repeat the $parent.$index equals $index.
The following code is given:
<div ng-repeat="category in :: $ctrl.categories">
<span id="category-{{ $index }}">
{{ :: category.name }}
</span>
<ul>
<li ng-repeat="data in :: category.links"
id="link-{{ $parent.$index }}-{{ $index }}">
{{ :: data.name }}
</li>
</ul>
</div>
Expected resulting ID's for LI:
<div>
<span id="category-0">CatA</span>
<ul>
<li id="link-0-0">[..]</li>
<li id="link-0-1">[..]</li>
<li id="link-0-2">[..]</li>
</ul>
</div>
<div>
<span id="category-1">CatB</span>
<ul>
<li id="link-1-0">[..]</li>
<li id="link-1-1">[..]</li>
</ul>
</div>
Actual resulting ID's for LI:
<div>
<span id="category-0">CatA</span>
<ul>
<li id="link-0-0">[..]</li>
<li id="link-1-1">[..]</li>
<li id="link-2-2">[..]</li>
</ul>
</div>
<div>
<span id="category-1">CatB</span>
<ul>
<li id="link-0-0">[..]</li>
<li id="link-1-1">[..]</li>
</ul>
</div>
Can someone confirm this behaviour? Or did I miss something?
Working as expected.
angular.module('test', []).controller('Test', Test);
function Test($scope) {
var $ctrl = this;
$ctrl.categories = [
{
name: 'cat1',
links: [{name: 'l1'}, {name: 'l2'}, {name: 'l3'}]
},
{
name: 'cat2',
links: [{name: 'l4'}, {name: 'l5'}]
}
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app='test' ng-controller='Test as $ctrl'>
<div ng-repeat="category in :: $ctrl.categories">
<span id="category-{{ $index }}">
{{ :: category.name }}
</span>
<ul>
<li ng-repeat="data in :: category.links"
id="link-{{ $parent.$index }}-{{ $index }}">
{{ :: data.name }}
</li>
</ul>
</div>
</div>
You probably have some scope generating elements surrounding your child layer e.g. ng-if, ng-repeat, ng-switch. In this case you'll need to add more layers of $parent
I have a grid which is selectable. On Clicking -> Select. I want the selected value to be highlighted and displayed as first value in another grid along with the remaining values I used a angular filter but it is displaying only the selected value.
You can use a selected flag on each item, something like this:
<ul>
<li ng-repeat="item in items"
ng-class="{ selected: item.selected }"
ng-click="item.selected = !item.selected">
{{ item.name }}
</li>
</ul>
<ul>
<li ng-repeat="item in items | filter:{selected:true}"
ng-click="item.selected = false">
{{ item.name }}
</li>
</ul>
See this jsfiddle
To show the selected ones first in a grid, you can use the orderBy filter:
<ul>
<li ng-repeat="item in items | orderBy:'-selected'"
ng-click="item.selected = false">
{{ item.name }}
</li>
</ul>
See this jsfiddle
I have a html code:
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
And the Angular code:
$scope.addToShoppingList = function(id){
};
I just want the id element to disappear (hide, fadeOut etc), when it's clicked. I bet it's something about the ng-hide but for now I'm too dumby for that.
Thanks for any answers.
Edit: It should be inside the addToShoppingList function.
Edit2: This is the whole function:
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
};
When the li element is clicked, it pushes that element to the new array. And then it should be hidden.
Edit3: If I want to cancel it and make the items come back to the array, the result is strange.
You could do something like this:
<div ng-controller="MyCtrl2">
<h2>Hide each LI:</h2>
<ul>
<li ng-click="pushItem(suggestion)" ng-repeat="suggestion in results" ng-click="visible = false">
{{suggestion}}
</li>
</ul>
</div>
Below is the angular code:
var myApp = angular.module('myApp',[]);
function MyCtrl2($scope) {
$scope.results = [1, 2, 3, 4];
$scope.itemsToBuy = [];
$scope.pushItem = function(item){
$scope.itemsToBuy.push(item);
$scope.results.splice($scope.results.indexOf(item),1);
}
}
JS Fiddle on the same:
http://jsfiddle.net/59gdo817/
On the vice-versa, just add the item back to results array to show the li back.
You can add a new status to the $scope.drinks array called isHidden which will track whether or not the item is hidden. When the user clicks on that li, the function will set isHidden to true and the ng-hide will immediately cause it to hide from the DOM.
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)" ng-hide="product.isHidden===true">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
$scope.drinks[id].isHidden = true;
};
How about this:
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id);" ng-hide='product.hidden'>
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
And in your addToShoppingList, you can set the product to hidden:
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
$scope.drinks[id].hidden = true;
};
I want to change {{order.status}} to def when someone click updatestatus button.
<ul>
<li ng-repeat="order in orders">
<!--
<div ng-model="row[order.id]" >abc</div>
-->
<div ng-model="row[order.id]" >{{order.status}}</div>
updatestatus
</li>
</ul>
Controller
$scope.row = {};
$scope.changestatus = function(id) {
//console.log(id);
$scope.row[id] = 'def';
}
It does not work. Please help.
You don't need ng-model here. ng-model is used for inputs, textarea, select or custom form elements https://docs.angularjs.org/api/ng/directive/ngModel
<ul>
<li ng-repeat="order in orders">
<div>{{ row[order.id] }}</div>
updatestatus
</li>
</ul>
Here, you just need to update the view. For this ng-bind is used https://docs.angularjs.org/api/ng/directive/ngBind
<div> ng-bind="row[order.id]"></div> and <div>{{ row[order.id] }}</div> are similar
UPDATE
<ul>
<li ng-repeat="order in orders">
<div>{{ order.status }}</div>
Update Status
</li>
</ul>
Controller:
$scope.changestatus = function(order) {
//console.log(order.id);
order.status = 'the update status'; // status changed
}
Use {{row[order.id]}} instead of abc in your view and remove ng-model within your div.
<ul>
<li ng-repeat="order in orders">
<div>{{ row[order.id] }}</div>
updatestatus
</li>
</ul>
Or
<ul>
<li ng-repeat="order in orders">
<div ng-bind="row[order.id]"></div>
updatestatus
</li>
</ul>
I have a parse syntax error when i try this :
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul>
<li ng-repeat="feed in feed{{post.idFB}}">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
problem is the line <li ng-repeat="feed in feed{{post.idFB}}">, what is the good syntax ?
result expected is like feed846097918756247
The online app: http://www.monde-du-rat.fr/pmr/
EDIT : jmb.mage solution :
<ul ng-init="myFeed = myFeedFunction(raterie.idFB);">
<li ng-repeat="feed in myFeed | limitTo:1">adoptions are : {{feed.title}}</li>
<li ng-repeat="feed in feed846097918756247 | limitTo:1">search is : {{feed.title}}</li>
<ul>
only second li works, not the first with the automatically variable
I'd use only a feed object as follow, scope.feed[scope.posts[index].idFB]= 'whatever'
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul>
<li ng-repeat="feed in feed[post.idFB]">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
If feed846097918756247 is a JavaScript object than you could do something like this
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul ng-init="var myFeed = eval('feed' + post.idFB);">
<li ng-repeat="feed in myFeed">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
Although since it's using eval(), you may need to do the ng-init with a function like:
<ul ng-init="var myFeed = myFeedFunction(post.idFB);">
and then have a function in your controller:
function myFeedFunction(pId) {
return eval('feed' + pId) ;
}