hi everyone,am very new in Angularjs and i have a project to create a user
form, i have created partials of html and i want to call those partials
into directives which is not a big problem, but the problem i have is to
how i can work in html to make those partials appear like tabs so that when
i click on the tab it must display the context of the partial.
And the other thing is to create single submit button for all these
partials, below is the part of the project that i have done so far,
*index.html*
<body>
<div ng-app="userForm" ng-controller="formCtrl">
<ul>
<li><my-dependant><a
href="applicant">Applicant</a></my-dependant></li>
<li><my-applicant><a
href="dependant">Dependant</a></my-applicant></li>
</ul>
</div>
</body>
*myapp.js*
var myApp = angular.module("myApp", []);
myApp.controller("formCrtl", function($scope){
})
.directive("myDependants", function(){
return {
restrict: "AE",
compile: function(scope, elem, attrs){
templateUrl:"dependant.html",
}
}
})
.directive("myApplicant", function(){
return {
restrict: "AE",
compile: function(scope, elem, attrs){
templateUrl:"applicant.html",
}
}
}
});
module.controller("formCtrl", function($scope) {
$scope.person = {};
$scope.ButtonClick = function(){
if ($scope.myForm.$valid){
alert("Submission successful")
}
console.log($scope.person)
}
});
*applicant.html*
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<input type="date" class="form-control" id="formInputDateOfBirth"
ng-model="person.dateOfBirth" required>
</div>
<div class="form-group">
<label for="maidenName">Previous or maiden name</label>
<input type="text" class="form-control"
id="formInputPreviousOrMaidenName" ng-model="person.maidenName" required>
</div>
*dependant.html*
<div class="form-group" ng-class="{ 'has-error' : userForm.title.$invalid
&& !userForm.title.$pristine }">
<label for="title">Title</label>
<input type="text" class="form-control" name="title"
ng-model="user.title" required>
<p ng-show="userForm.title.$invalid && !userForm.title.$pristine"
class="help-block">Your title is required.</p>
</div>
<!--initial-->
<div class="form-group" ng-class="{ 'has-error' :
userForm.initial.$invalid && !userForm.initial.$pristine }">
<label for="initial">Initials</label>
<input type="text" class="form-control" name="initial"
ng-model="user.initial" required>
<p ng-show="userForm.initial.$invalid &&
!userForm.initial.$pristine" class="help-block">Your i nitial required.</p>
</div>
Thanks in advance, if any links please i will appreciate coz i have
searched where i could but ididnt find something to meet my requirements
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
