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
Related
I have the following:
<li ng-repeat="category in categories" ng-if="category.id== '3'">
<div ng-repeat="item in items" ng-if="item.no == category.no" ng-style="{'margin-left': ($first ? '20px': '0px')}">
...
</div>
</li>
it can only work on the very first item, but not every first item in each li. How can I update this?
You need to try it like this. The way you were doing it $first refers to the first ng-repeat.
<li ng-repeat="category in categories" ng-if="category.id== '3'">
<div ng-repeat="item in items" ng-if="item.no == category.no">
// use $parent.$first to check for the first item of categories
// using $first here refers to first item in items array
<div ng-style="{'margin-left': ($first ? '20px': '0px')}">...</div>
</div>
</li>
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 am new to angular and I wanted to to know how to apply and remove a filter in ng-repeat directive but I want to remove or add the filter on some condition such as on URL change using $stateParams
if($stateParams.x){
//remove unique filter
}
else{
//add unique filter
}
below is the code that I am working on
<div ng-app="app" ng-controller="MyCtrl as item">
<div >
<ul>
<li ng-repeat="item in items | unique: 'column'" myfilter>
{{ item.column }}
</li>
</ul>
</div>
</div>
here is a plunker link that I am trying to do this but it is not working.
http://plnkr.co/edit/zwy7slwOPfvLqJPVV1sk?p=preview
It can be done if you pass in additional param in unique filter with some flag to enable and disable unique filter. In other words if flag is true then you will go with the unique logic other wise you will just return all items. It has been answered here along with a plunker sample
If you don't want to write your own filter you can have an outer ng-if like this:
<div ng-app="app" ng-controller="MyCtrl as item">
<div>
<ul ng-if="$stateParams.x">
<li ng-repeat="item in items | unique: 'column'" myfilter>
{{ item.column }}
</li>
</ul>
<ul ng-if="!$stateParams.x>
<li ng-repeat="item in items">
{{ item.column }}
</li>
</ul>
</div>
</div>
I have a list with ng-repeat in angular and a button which toggle checked property in all items (1.4):
<button ng-click="selectAll()">select all</button>
example 1:
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.checked"> {{ item.name }}
</li>
example 2:
<li ng-repeat="item in items">
<span class="glyphicon" ng-class="{'glyphicon-ok': item.checked}"></span> {{ item.name }}
</li>
example 3:
<li ng-repeat="item in items">
<span class="glyphicon glyphicon-ok" ng-show="item.checked"></span> {{ item.name }}
</li>
example 4:
<li ng-repeat="item in items">
<span>{{ item.checked }}</span> {{ item.name }}
</li>
Performance of example 1 and 4 is OK. But example 2 and 3 has almost 1 sec. lag. There about 200 items in the array.
Why the performance is so different? I would like to have custom "checkboxes" with glyphicon - so I would like to have example 2 work but the performance is bad
You can try the following for example 2:
<li ng-repeat="item in items track by item.checked">
<span class="glyphicon" ng-class="{'glyphicon-ok': item.checked}"></span>
{{ item.name }}
</li>
For example 3, try this:
<li ng-repeat="item in items track by item.checked">
<span class="glyphicon glyphicon-ok" ng-if="item.checked"></span> {{ item.name }}
</li>