creating a directive to make ng-keyup be an alternate search initializer

Question

i am new to angular and i have a couple text fields, a checkbox, and a drop down how can i make it so that i can press the enter button and it would submit? i been reading and found the ng-submit function, i placed this in my form but nothing happens i am assuming i am going to have to activate it somewhere in my angular controller.

 <form ng-submit="search()">
            <div class="form-group">
                <label>Job Number</label>
                <input class="form-control" style="width: 92%" type="text" ng-model="jobNumber"/>
            </div>
        </form>
        <form ng-submit="search()">
            <div class="form-group">
                <label>Description</label>
                <input class="form-control" style="width: 92%" type="text" ng-model="description" />
            </div>
        </form>
    </div>
</div>

and i didnt do anything in my controller which is below.

var CapitalRequestMultiMillInquiryController = function ($scope, $sce, $rootScope, $modal, $window, CapitalRequestService, PlantService) {


$rootScope.title = 'Capital Request Multi Mill Inquiry';
$scope.allMills = [];
$scope.mill = '';
$scope.jobNumber = '';
$scope.description = '';
$scope.amount = '';
$scope.amountOperator = '';
$scope.openOnly = '';
$scope.projectManager = '';

//$scope.allUsers = [];

//UsersService.getUsersWithId().then(function(objectTypes) {
//    $scope.allUsers = objectTypes
//});

//CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
//    $scope.tomahawk = results;
//    for (var i = 0; i < $scope.tomahawk.length; i++)
//        $scope.tomahawk[i] = $sce.trustAsHTML($scope.tomahawk[i]);
//});


PlantService.getPlantId().then(function (mills) {
    $scope.allMills = mills
});

$scope.search = function() {
    //for each mill

    CapitalRequestService.searchMulti("http://coucmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.counce = results;
        $scope.counce.forEach(function (item) {
           // item.projectManager = $sce.trustAsHtml(item.projectManager);
            item.jobNumber = $sce.trustAsHtml(item.jobNumber);
            item.description = $sce.trustAsHtml(item.description);
            item.amount = $sce.trustAsHtml(item.amount);
        });
    });

    CapitalRequestService.searchMulti("http://filcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.filer = results;
        $scope.filer.forEach(function (item) {
         //   item.projectManager = $sce.trustAsHtml(item.projectManager);
            item.jobNumber = $sce.trustAsHtml(item.jobNumber);
            item.description = $sce.trustAsHtml(item.description);
            item.amount = $sce.trustAsHtml(item.amount);
        });
    });

    CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.tomahawk = results;
        $scope.tomahawk.forEach(function (item) {
          //  item.projectManager = $sce.trustAsHtml(item.projectManager);
            item.jobNumber = $sce.trustAsHtml(item.jobNumber);
            item.description = $sce.trustAsHtml(item.description);
            item.amount = $sce.trustAsHtml(item.amount);
        });
    });

    CapitalRequestService.searchMulti("http://tridentval.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.valdosta = results;
    });

    CapitalRequestService.searchMulti("http://tridentder.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.deridder = results;
    });

    CapitalRequestService.searchMulti("http://valcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.whiteMills = results;
        $scope.whiteMills.forEach(function (item) {
            item.jobNumber = $sce.trustAsHtml(item.jobNumber);
            item.description = $sce.trustAsHtml(item.description);
            item.amount = $sce.trustAsHtml(item.amount);
        });
    });

    }
 };

http://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs — ps., Feb 11 '16 at 22:10
i want to use a directive so that i can just use ng-keyup in the individual input or select fields. how would i modify my controller to do that? — Edgar, Feb 12 '16 at 12:49

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

I believe this was already answered here: Submit form on pressing Enter with AngularJS

If that doesn't cover it let me know.

edited May 23 '17 at 12:15

Community

1
1

answered Feb 11 '16 at 22:14

Kevin S

511
4
7

The ng-submit button only worked if i but it in the DIV that contains the button. i tried to wrap all the input fields with it at once and it didnt work – Edgar Feb 12 '16 at 12:37
got it from that post – Edgar Feb 12 '16 at 16:34

creating a directive to make ng-keyup be an alternate search initializer

1 Answers1