Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="APP">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-controller='baseController'>
  
  <hover-select 
                placeholder="Select a value"
                data="myList"
                model="selected"
                display-field="label"
                value-field="value"
                on-select="onSelectFromList()"
                />
​
</body>
</html>
 
.hover-select {
  font-family:Verdana;
}
​
.hover-select *{
  margin:0;
  padding:0;
  
}
​
.hover-select ul{
  list-style-type:none;
  /* display:none; */
}
​
.hover-select .trigger:hover > ul{
  display:block;
}
​
​
.hover-select .trigger ul li .checkOn { 
  color: red !important;
  width: 80px !important;
  display: inline-block;
}
.hover-select .trigger ul li .check {
  color: green !important;
  width: 80px !important;
  display: inline-block;
}
 
var APP = angular.module('APP' ,[]);
​
APP.directive('hoverSelect', function($timeout){
  
  return {
    restrict: 'E',
    scope: {
      placeholder: "@",
      data: "=",
      model: "=",
      displayField: "@",
      valueField: "@",
      onSelect: "&"
    },
    replace:true,
    template: "<div class='hover-select'>" + 
      "<div class='trigger'>" +
        "<h4>{{selectedValue[displayField]}}</h4>" +
        "<ul>" + 
            "<li ng-repeat='item in data' ng-click='selectItem(item)'>" +
                "<span class='checkOn' ng-if='item.value == model'>Check </span>" +
                "<span class='check' ng-if='item.value != model'>not </span>" +
                    "{{item[displayField]}}" +
            "</li>" +
        "</ul>" +
       "</div>" +    
    "</div>",
    link:function($scope, $element, $attrs){
      
      $scope.find = function(value){
        for(var i=0;i<$scope.data.length;i++){
          var rec = $scope.data[i];
          if(rec[$scope.valueField] === value){
            return rec;
          }
        }
        return false;
      };
      
      var found = $scope.find($scope.model);
      var placeholderObj = {};
      placeholderObj[$scope.displayField] = $scope.placeholder;
      $scope.selectedValue = found ? found : placeholderObj;
      
      
      $scope.selectItem = function(item){        
        $scope.selectedValue = item;     
        $scope.model = item[$scope.valueField];
        $timeout(function(){
          $scope.onSelect();
        }, 50);         
        
      };
    }
  };
  
});
​
​
APP.controller('baseController', function($scope, $timeout){
  
  
  $scope.onSelectFromList = function(){
      alert("VALUE TO SAVE: " + $scope.selected);   
  };
  
  $scope.selected = 3;
  
  $scope.myList = [
    { value: 1,label: "Item 1", year: "year 1" }, 
    { value: 2,label: "Item 2", year: "year 2" }, 
    { value: 3,label: "Item 3", year: "year 3" }, 
    { value: 4,label: "Item 4", year: "year 4" }, 
    { value: 5,label: "Item 5", year: "year 5" }
  
  ];
  
  
  
  
  
  
});
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers