I am trying to autofocus the form's first field.
but not able to.
My scenario is,
in first load it shows table with data.On this page a <a> link is given which does nothing but showForm="true" which shows form for adding data.
Code is as below:
// controller side
angular.module('degreeCtrl', ['ui.bootstrap'])
// inject the degree service into our controller
.controller('degreeController', function($scope, $http, Degree,$filter, ngTableParams,$localStorage) {
// object to hold all the data for the new degree form
$scope.$storage=$localStorage;
$scope.degreeData = {};
// loading variable to show the spinning loading icon
$scope.loading = true;
$scope.showForm = false;
$scope.isfocus=true;
//
//....
//....
// etc
});
on UI side:
<div ng-app='degreeApp' ng-controller='degreeController' ng-click="resetSession();" ng-cloak>
<div class='page-lable'>Degrees </div>
<div ng-show='!showForm' style='margin-top:10px;'>
<div>
<a href='#' id="testlink" ng-click='showForm=true;isfocus=true;resetSession(); resetForm();' class='Add-record-button'><b>Add Degree </b></a>
</div>
<table ng-table="tableParams" show-filter="true" class="table" template-pagination="custom/pager">
<tr ng-repeat="degree in $data">
// table code
</tr>
</table>
</div>
<div name='DegreeForm' ng-show='showForm'>
<div>
<a href='#' ng-click='showForm=false' class='Add-record-button'><b>Back</b></a>
</div>
<br>
<form name='SubmitDegree' class='simple-form'>
<div>
<span class="lable">Degree Name</span>
<input type="text" name="degree_name" id="degree_name_id" ng-model="degreeData.degreeName" required autofocus ng-pattern="/^([a-zA-Z]+\s*)*[a-zA-Z]+$/" placeholder="Degree Name"/>
<span ng-show="SubmitDegree.degree_name.$error.pattern">
Please enter valid Name.
</span>
</div>
<br>
<div>
<input type="Submit" value="Submit" ng-click='saveDegree(degreeData)' style='margin-left:255px;height:30px;' ng-disabled="SubmitDegree.$invalid "/>
<input type="Reset" ng-click='resetDegree(degreeData)' ng-disabled="!SubmitDegree.$dirty" style='height:30px;' />
</div>
</form>
</div>
what above code does is:
on back button it hides data enter form and shows table
and on Add is shows form and hide table.
but how can i make it autofocus on first field of form?
i tries everything like using .directive
data[0] focus
any suggestions please.