Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular-UI ui-keypress not working
    primarykey
    data
    text
    <p>I'm having trouble getting even a simple use of angular-ui up and running. I want to be able to easily detect keypresses, for instance, to automatically add an item after pressing <code>enter</code> in a text box without having to press an Add button.</p> <hr> <p>Here's my current attempt:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html ng-app xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Main&lt;/title&gt; &lt;link rel="stylesheet", href="http://angular-ui.github.com/angular-ui/build/angular-ui.css" /&gt; &lt;/head&gt; &lt;body ng-controller="Ctrl"&gt; &lt;button ng-click="add()"&gt;Add&lt;/button&gt; &lt;input type="text" ui-keypress="{enter: 'add()'}" /&gt; {{item}} &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"&gt; &lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"&gt;&lt;/script&gt; &lt;script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"&gt;&lt;/script&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; var myApp = angular.module('myApp', ['ui.directives']); </code></pre> <hr> <pre><code>function Ctrl($scope) { $scope.item = ""; $scope.add = function () { $scope.item = "Item Added"; } } </code></pre> <p>You can see the behavior here: <a href="http://jsfiddle.net/NbjZL/5/" rel="nofollow">http://jsfiddle.net/NbjZL/5/</a>. Note that clicking the button after typing text works, but pressing <code>enter</code> after typing text does not. I've read what documentation I can find and have looked at several examples, but I'm sure I'm still missing some small thing.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload