Phonepad text prediction with Angular JS

A demo of a phonepad text predition using Angular JS

by odiseo

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<div ng-app ng-controller="Ctrl" id="panel">
    <div id="leftpanel">
        <p>Pressed keys</p>
        <p style="max-width:150px;">{{pressedKeys}}</p>
        <ul id="triple">
            <li ng-repeat="key in numKeys">
                <button class="keybutton" ng-click="click($index)">{{key.key}}</button>
                <span class="labels">{{key.value}}</span>
            </li>
        </ul>    
        <div><button ng-click="clear()">Clear</button></div>    
    </div>
    <div id="rightpanel">
        <p>Combinations</p>
        <ul>
            <li ng-repeat="key in getResults()">{{key}}</li>
        </ul>        
    </div>
</div>

CSS

#panel {
  
}
#leftpanel {
    float:left;
    position:relative;
    width: 400px;
    height:800px;
    word-wrap: break-word;
}
#rigthpanel {
    position:relative;
}
#triple ul{
  width:250px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
#triple li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;} /* 2 col */
#triple li  { width:33.333%; } /* 3 col */
#quad li    { width:25%; } /* 4 col */
#six li     { width:16.666%; } /* 6 col */

span.labels {
 font-size:80%;   
}
button.keybutton {
 width: 90px;   
 display:block;
}

JavaScript

var $scope;
function Ctrl($scope) {
    $scope.numKeys = [
        {key: "1", value: []}, 
        {key: "2", value: ['a', 'b', 'c']}, 
        {key: "3", value: ['d', 'e', 'f']}, 
        {key: "4", value: ['g', 'h', 'i']}, 
        {key: "5", value: ['j', 'k', 'l']}, 
        {key: "6", value: ['m', 'n', 'o']}, 
        {key: "7", value: ['p', 'q', 'r', 's']}, 
        {key: "8", value: ['t', 'u', 'v']}, 
        {key: "9", value: ['w', 'x', 'y', 'z']},        
    ]; 
    $scope.pressedKeys = []; 

    $scope.click= function($index) {
        $scope.pressedKeys.push($scope.numKeys[$index].key);
    };
    
    $scope.clear= function($index) {
        $scope.pressedKeys = [];
    };   
    
    $scope.getResults = function() {
        var ret = [];
         $.each($scope.pressedKeys , function(index, element) { 
            var keyIndex = element - 1;
             ret.push($scope.numKeys[keyIndex].value);
        });           
        return ret;
    }
            
}