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:

Blogroll

Follow this blog by Email

Popular Posts