how to get the current view contents only in angularjs controller? - angularjs

Question

I'm dealing with md-tabs-wrapper it gives the partial view of each category and a single save button as follow
The existing code for it
<md-dialog aria-label="Profile edit" class="profile-edit full-height">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Edit Profile</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="hide()">
<md-icon md-font-icon="icon-close" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content >
<md-tabs class=" margin-bottom-40" md-dynamic-height md-border-bottom>
<md-tab label="Profile">
<div layout layout-sm="column">
<md-input-container flex="30">
<label>First Name</label>
<input type="text" ng-model="user.firstName">
</md-input-container>
<md-input-container flex>
<label>Last Name</label>
<input type="text" ng-model="user.lastName">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex="30">
<label>Other Name</label>
<input type="text" ng-model="user.otherName">
</md-input-container>
<md-select flex class="md-select-form" ng-model="user.gender" placeholder="Gender" ch-boolean>
<md-option ng-value="gender" ng-repeat="gender in ['Male', 'Female']">{{gender}}</md-option>
</md-select>
<md-input-container flex>
<label>Date of Birth</label>
<input type="date" ng-model="user.dateOfBirth">
</md-input-container>
</div>
<md-input-container>
<label>Profile Picture</label>
<input type="file" name="file" file-model = "user.myFile">
</md-input-container>
<md-input-container flex>
<label>Summary(max 200 characters)</label>
<textarea ng-model="user.description" md-maxlength="200"></textarea>
</md-input-container>
</md-tab>
<md-tab label="Experience" ng-init="">
<h2>Employment</h2>
<div ng-repeat="experience in user.experiences">
<md-input-container>
<label>Job title</label>
<input type="text" ng-model="experience.job_title">
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex="66">
<label>Employeer Name </label>
<input type="text" ng-model="experience.company_name">
</md-input-container>
<md-input-container flex="33">
<label>Location</label>
<input type="text" ng-model="experience.location_name">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex="40">
<label>Start Date</label>
<input type="date" ng-model="experience.date_start" date-ob>
</md-input-container>
<md-input-container flex="40" ng-if="experience.current_work==0">
<label>End Date</label>
<input type="date" ng-model="experience.date_end" date-ob>
</md-input-container>
<md-checkbox flex ng-model="experience.current_work" ng-true-value='1' ng-false-value='0' aria-label="Current" style="margin: 5px;">
Current
</md-checkbox>
</div>
<md-input-container flex>
<label>Job Description </label>
<textarea ng-model="experience.job_des" ></textarea>
</md-input-container>
</div>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )">Add Position</md-button>
</md-tab>
<h2 class="md-subhead">Projects</h2>
<div>
<md-input-container>
<label>Project Title</label>
<input type="text" ng-model="user.jobtitle">
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex="66">
<label>Employeer Name </label>
<input type="text" ng-model="user.employeer">
</md-input-container>
<md-input-container flex>
<label>Start Date</label>
<input type="date" ng-model="user.startDate">
</md-input-container>
<md-input-container flex>
<label>End Date</label>
<input type="date" ng-model="user.endDate">
</md-input-container>
</div>
<md-input-container flex>
<label>Project Details </label>
<textarea ng-model="user.jobDescription" ></textarea>
</md-input-container>
</div>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )">Add Projects</md-button>
</md-tab>
<div layout layout-sm="column">
<md-input-container flex>
<label>Primary Number</label>
<input type="text" ng-model="user.primaryNumber">
</md-input-container>
<md-input-container flex>
<label>Secondary Number</label>
<input type="text" ng-model="user.secondaryNumber">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex>
<label>Primary Email</label>
<input type="text" ng-model="user.primaryNumber">
</md-input-container>
<md-input-container flex>
<label>Secondary Email</label>
<input type="text" ng-model="user.secondaryNumber">
</md-input-container>
</div>
<h2 class="md-subhead">Social Media Links</h2>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-facebook-squre" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
</md-tab>
</md-tabs>
</md-dialog-content>
<div class="md-actions" layout="row">
<span flex></span>
<md-button ng-click="hide()" class="md-primary">
Cancel
</md-button>
<md-button ng-click="answer(this)" class="md-primary">
Save
</md-button>
</div>
</form>
</div>
</md-dialog>
In my controller i have coded to save the each tabs content as it is
$scope.answer = function(answer) {
console.log(answer);
Profile.editProfilePro($scope.user);
Profile.editProfileExp($scope.user.experiences[0]);
$mdDialog.hide(answer);
};
I want to execute the Profile.editProfileExp($scope.user) only if current view in experience
The problem is how to save the current view tabs contents only in controller answer()?? Tell me your suggestions. Thanks .

Answer 1

you can have a scope variable as tabsdata for active tab, so that you can identify the selected Tab and add attribute "active="tabsdata.ExperienceTab" to you html "md-tab" tag it would provide you the active Tab status, and based on your selected tab execute your code.