0

I've been looking online for some examples and I have found different versions online, but none have been working. I won't deny that I could be doing this wrong, but hopefully someone can help? As the title suggests, I would like to auto focus on the text box (Name of School Subject) after clicking a button.

Code is the following:

HTML:

<div class="modal-header">
    <h3 class="modal-title" ng-show="isNew">Create New Subject</h3>
    <h3 class="modal-title" ng-hide="isNew">Modify Subject "{{targetEntity.name}}"</h3>
</div>
<div class="modal-body">
    <ng-include src="'views/partials/notification-area.html'"></ng-include>
    <form class="form-horizontal" name="subjectDetailsForm">
        <fieldset>
            <div class="form-group"
                 ng-class="{ 'has-error' : subjectDetailsForm.name.$invalid && !subjectDetailsForm.name.$pristine }">
                <label for="name"
                       class="col-lg-4 col-sm-4 col-xs-4 control-label no-padding-right">Name* </label>
            **<div ng-app="Myapp" ng-controller="txtbox as get" ng-init="get.txtfocus()" class="col-lg-7 col-sm-7 col-xs-7">**
                    <input type="text" class="form-control" id="name" name="name" ng-model="targetEntity.name"
                           required placeholder="Name" ng-maxlength="64">
                    <p ng-show="subjectDetailsForm.name.$invalid && !subjectDetailsForm.name.$pristine"
                       class="help-block">Mandatory field, maximum length 64 characters.</p>
                </div>
            </div> 
        </fieldset>
    </form>
</div>
<div class="modal-footer">
     <button class="btn btn-blue" ng-click="handleCreate()" ng-show="isNew"
             ng-disabled="siteUserDetailsForm.$invalid" auto-focus='name'>
        Create New Subject
    </button>
</div>

AngularJS:

app.controller('SubjectDetailsCtrl', function ($scope, $state, $stateParams, $compile, $uibModal, $log, SpringDataRestService, NgTableParams) {

    $scope.renderCrudEntityState = renderCrudEntityState;
    $scope.renderEntityState = renderEntityState;

    **angular.module('Myapp',[]).controller('txtbox', function() {
    var get = this;
       get.txtfocus = function () {
          document.getElementById('name').focus();
          document.getElementById('name').style.color='Red'
       };
    });**

    // Populate data table with subject array
    $scope.refreshTable = function () {
        SpringDataRestService.get(
            {
                resource: "subjects"
            },
            function (response) {
                $scope.subjectTableOptions = new NgTableParams({}, {
                    dataset: response.subjects,
                    counts: [], // hide page counts control
                });
            },
            function (response) {
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );
    };

    $scope.refreshTable();

    $scope.openModal = function (row) {
        var uibModalInstance = $uibModal.open({
            windowClass: "",
            templateUrl: "views/modals/subject-details-edit.html",
            controller: 'ModalSubjectDetailsEditCtrl',
            backdrop  : 'static',
            size: null,
            resolve: {
                row: function () {
                    return row;
                },
                onComplete: function () {
                    return $scope.refreshTable;
                }
            }
        });
    };
});

Video ref: https://www.youtube.com/watch?v=r79qiKjonEA

gadww gwgwgw
  • 11
  • 4
  • Sorry, I thought it would of been better to produce the clean version. – gadww gwgwgw Jul 15 '19 at 16:18
  • I've attempted another version with the reference provided at the bottom, code has been updated with my attempt. – gadww gwgwgw Jul 16 '19 at 16:11
  • Defining a controller inside a controller has the same problem as defining a directive inside a controller. Directives, controllers, services, filters, erc. can only be added to the $injector during the config phase of the app. Also there can be only one `ng-app` directive in the HTML. Subsequent `ng-app` directives will be ingored. – georgeawg Jul 16 '19 at 17:39
  • To focus an input from JavaScript, use the `.focus()` method of that element. For more information, see [MDN Web API Reference - HTMLElement.focus()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus). – georgeawg Jul 16 '19 at 18:01

0 Answers0