When you provide an option to select an item in list of items then you must show the difference between selected items and un-selected items. To show this difference, changing in the background color or text color of selected item is necessary. The user must recognize the items that are select-able, To implement this feature we need to change the background-color or text-color on mouse over. Lets do this with example.
CSS
Here selectedItem class will give background color to selected item
.item { padding:12px; border:1px solid #ccc; cursor:pointer; } .hoverItem:hover { background-color:#eeeeee; } .selectedItem { background-color:#dfdfdf; }
Markup
record.classes holds the array of classes. You can learn about adding and removing classes from here
<html ng-app="" ng-controller="myCtrl"> ..... <div ng-click="selectItem($index)" ng-class="record.classes" ng-repeat="record in records track by $index"> {{record.value}} </div> ..... </html>
Script
The logic is simple. When user clicks on an item we will add selected class and remove hover class
function myCtrl($scope) { // initialize data $scope.records = []; for(var i=0;i<5;i++) { $scope.records.push( { value: "record "+i, classes : ["item", "hoverItem"] } ); } // when user selected item $scope.selectItem = function(index) { for(var i=0;i<$scope.records.length;i++) { if(index === i) { $scope.records[i].classes.pop('hoverItem'); $scope.records[i].classes.push('selectedItem'); } else { $scope.records[i].classes.pop('selectedItem'); $scope.records[i].classes.push('hoverItem'); } } }; }
0 comments:
Post a comment