I have a function to add records to database.
What I need to do is when I select an option all necessary fields must be filled with data.
I'm just new with angularjs and want to learn how to do this.
below is my code.
template
<div class="col-md-10">
<div class="col-md-12">
<div class="form-group">
<label>Select Employee </label>
<select class="form-control" ng-change='getData()' id='empId' ng-model="empId" ng-options="opt.id as opt.value for opt in employees">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Department <i class="required">*</i></label>
<select class="form-control" ng-change ="getPos()" ng-model="data.Employee.departmentId" ng-options="opt.id as opt.value for opt in deparments" data-validation-engine="validate[required]">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Position <i class="required">*</i></label>
<select class="form-control" ng-model="data.Employee.positionId" data-validation-engine="validate[required]">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Rate <i class="required">*</i></label>
<input type="text" class="form-control" ng-model="data.Employee.rate" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Loan Amount <i class="required">*</i></label>
<input type="text" class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Period (months) <i class="required">*</i></label>
<input type='text' class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Date Start<i class="required">*</i></label>
<input type="text" class="form-control text-left" id="dateStart" ng-model="data.Employee.contractFrom" data-validation-engine="validate[required]" id="contractFrom">
</div>
</div>
</div>
controller
app.controller('LoanAddController', function($scope, Loan,Select) {
$('#form').validationEngine('attach');
$scope.load = function() {
Loan.get({ id: $scope.employeeId }, function(e) {
$scope.data = e.data;
});
Select.get({ code: 'departments' }, function(e) {
$scope.departments = e.data;
});
// employees selection
Select.get({ code: 'employees' }, function(e) {
$scope.employees = e.data;
});
Select.get({ code: 'positions' }, function(e) {
$scope.positions = e.data;
});
}
$('#dateStart').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
$scope.load();
// save loan data
$scope.save = function() {
valid = $("#form").validationEngine('validate');
if (valid) {
Loan.save($scope.data, function(e) {
if (e.ok) {
$.gritter.add({
title: 'Successful!',
text: e.msg,
});
window.location = '#/loans';
} else {
$.gritter.add({
title: 'Warning!',
text: e.msg,
});
}
});
}
}
});
some JSON data
{
"ok": true,
"data": [
{
"Loan": {
"id": "1",
"employeeId": "9",
"dateApplied": "2015-10-15",
"amount": "5000",
"period": "6",
"startdate": "2015-11-01",
"status": "pending",
"visible": true,
"created": "0000-00-00 00:00:00",
"modified": "0000-00-00 00:00:00"
},
"Employee": {
"id": "9",
"employeeNumber": "24681012",
"lastName": "Cortez",
"firstName": "Kim Carlo",
"middleName": "Mira",
"departmentId": "1",
"positionId": "4",
"rate": "600",
"typeId": "8",
"dateHired": "2015-10-22",
"contractFrom": "2015-10-31",
"contractTo": "2016-10-31",
"image": "9.PNG",
"visible": true,
"created": "2015-10-07 08:25:56",
"modified": "2015-10-07 08:25:56"
},
"Department": {
"id": null,
"code": null,
"name": null,
"description": null,
"visible": null,
"created": null,
"modified": null
},
"Position": {
"id": "9",
"name": "Bell boy",
"departmentId": "6",
"description": "bellboy, ice cream vendor",
"visible": true,
"created": "2015-10-06 13:52:43",
"modified": "2015-10-06 13:52:43"
}
}
],
"paginator": {
"page": 1,
"current": 1,
"count": 1,
"prevPage": false,
"nextPage": false,
"pageCount": 1,
"order": {
"Loan.id": "ASC"
},
"limit": 25,
"options": [
],
"paramType": "named"
}
}
I have to populate the fields for employee details.
Any help would be appreciated.
Thank guys,
Related
I am getting the incorrect indexes in my *ngFor. Basically the last indexes in the below array come back incorrectly. For example option 2 comes back with indexes 1 and 0 when it should be 0 and 1. Any other objects in the array come back fine. It's only the last objects in each array. In this example the problem is with option 2 and option c
Here is the Array
[
{
"corporateId": "be67e184-a663-439c-b841-c14a734011eb",
"selectedMAP": [
{
"mapId": 81,
"mapName": "prov 1",
"active": true,
"options": [
{
"optionId": 123,
"optionName": "option 1",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
},
{
"optionId": 124,
"optionName": "option 2",
"memberAmount": 2000,
"adultDependantAmount": 1500,
"childDependantAmount": 500,
"active": true
}
]
},
{
"mapId": 82,
"mapName": "Prov 2",
"active": true,
"options": [
{
"optionId": 125,
"optionName": "option a",
"memberAmount": 500,
"adultDependantAmount": 250,
"childDependantAmount": 250,
"active": true
},
{
"optionId": 126,
"optionName": "option b",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
},
{
"optionId": 127,
"optionName": "option c",
"memberAmount": 2000,
"adultDependantAmount": 1000,
"childDependantAmount": 1000,
"active": true
}
]
}
]
}
]
HTML
<div id="medicalCard" class="card mb-4 medicalCard" *ngFor="let provider of companyMedicalAidProvider[0].selectedMAP; let i = index;">
<button class="close float-right" (click)="removeMedicalProvider(i)">X</button>
<div class="card-body">
<h4>Company medical aid provider</h4>
<div class="row">
<div class="col-12">
<div class="input-container">
<label for="provider">Provider</label>
<input id="provider" [(ngModel)]="companyMedicalAidProvider[0].selectedMAP[i].mapName" type="text">
</div>
</div>
</div>
<h4>Available option</h4>
<div id="option" class="row option" *ngFor="let providerOptions of companyMedicalAidProvider[0].selectedMAP[i].options; let j = index;">
<div class="col-7">
<div class="input-container">
<label for="provider">Option name</label>
<input id="provider" [(ngModel)]="companyMedicalAidProvider[0].selectedMAP[i].options[j].optionName" type="text">
</div>
<div class="input-container">
<label for="provider">Member amount</label>
<input id="provider" [(ngModel)]="companyMedicalAidProvider[0].selectedMAP[i].options[j].memberAmount" type="number" placeholder="R"><span><button class="close ml-1"
(click)="removeOption(j,i)">X</button></span>
</div>
</div>
</div>
</div>
</div>
I get the indexes back when I click on the removeOption(j,i) button.
TS
removeOption(index: number, indexOption: number) {
console.log(index, indexOption);
}
Any ideas why this is happening?
kinda looks like it should be
(click)="removeOption(i,j)"
I do have a propblem with my angularjs Code.
I have an object which I want to split into two Groups.
The two objects looks something like
{
"_embedded": {
"aspects": [
{
"name": "KPIs",
"holderAssetId": "123",
"aspectTypeId": "KPIs",
"aspectTypeName": "KPIs",
"category": "dynamic",
"description": "description an. ",
"variables": [
{
"name": "Availability_Minutes",
"dataType": "DOUBLE",
"unit": "min",
"searchable": false,
"length": null,
"qualityCode": true,
"defaultValue": null
},
and 2nd one:
"_embedded": {
"assets": [
{
"assetId": "123",
"tenantId": "aaa",
"name": "GA700",
"etag": 1,
"externalId": "",
Now I want to have two Form-Control. In the first one I can choose aspects.name which will be filtered via ng-repeat out of the object. This works right now.
But The variable x in my ng-repeat is not transferred to my second form-control. Have a look at the code below.
What am I doing wrong?
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="form-group">
<label for="choose_asset_form">Asset</label>
<select class="form-control" id="choose_asset_form" ng-model="selected_assetId">
<option ng-repeat="x in ctrl.assets" ng-value="x.assetId">
{{x.name}}
</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="form-group">
<label for="choose_aspect_form">Aspect for {{x.assetId}}</label>
<select class="form-control" id="choose_aspect_form" ng-model="selected_aspect">
<option ng-repeat="x in ctrl.asset.aspects" ng-value="x.name">
{{x.name}}
</option>
</select>
</div>
</div>
</div>
So I can see assets.name in the first Control, but I can not see aspects.name in the second form-control.
I'm having trouble binding my default value to a ng-option. I already searched for the answer to my question but can't seem to find one.
My problem is that I have 3 cascading selects with one model.
default values
vm.roomData.branch = 'Lucena';
vm.roomData.building = 'mhq';
vm.roomData.roomFloor = '3rd Floor';
html
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="loc.floors as loc for loc in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
vm.locations data
[
{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [
{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}
],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [
{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}
],
"dateCreated": "2018-01-24T05:34:36.775Z"
}]
try initializing the default values like this,
$scope.roomData.branch = $scope.locations.find((loc) => loc.branch === 'Lucena');
$scope.roomData.building = $scope.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
$scope.roomData.roomFloor = '3rd Floor' ;
like
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
var vm = this;
vm.roomData = {};
vm.locations = [{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}],
"dateCreated": "2018-01-24T05:34:36.775Z"
}
];
vm.roomData.branch = vm.locations.find((loc) => loc.branch === 'Lucena'); debugger
vm.roomData.building = vm.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
vm.roomData.roomFloor = '3rd Floor' ;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl as vm">
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="o as o for o in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
</body>
I have a strange case. When i select item as select option items in select disappear. This is happening in both selectors.
This is my controller
controllers.addLocationCtrl = function($scope, countriesFactory, provincesFactory){
countriesFactory.getCountries().then(function(data){
$scope.countries = data;
console.log($scope.countries);
});
provincesFactory.getProvinces().then(function(data){
$scope.provinces = data;
console.log($scope.provinces);
});
}
This are objects for countries
[{"id_country":"1","country":"Austria"},
{"id_country":"2","country":"Belgium"},{"id_country":"3","country":"Bulgaria"},{"id_country":"4","country":"Croatia"},{"id_country":"5","country":"Cyprus"},{"id_country":"6","country":"Czech Republic"},
{"id_country":"7","country":"Denmark"},{"id_country":"8","country":"Estonia"},{"id_country":"9","country":"Finland"},{"id_country":"10","country":"France"},{"id_country":"11","country":"Germany"},{"id_country":"12","country":"Greece"}]
And this is my HTML
<div class="form-group">
<label>Country</label>
<select class="form-control" data-ng-model="countries"
data-ng-options="c.id_country as c.country for c in countries"></select>
</div>
<div class="form-group">
<label>Province</label>
<select class="form-control" data-ng-model="provinces"
data-ng-options="p.id_province as p.province for p in provinces">
</select>
</div>
When i select one item in select then this happens
<div class="form-group">
<label>Country</label>
<select class="form-control ng-valid ng-empty ng-dirty ng-valid-parse ng-touched"
data-ng-model="countries" data-ng-options="c.id_country as c.country for c in countries"><option selected="selected"></option></select>
</div>
Console log shows no errors at all. Am i using data-ng-model wrong way? What might be the couse for this problem. If you need any additional information's please let me know. Thank you
When you select an item, AngularJS replaces the content of countries with the id_country that you have selected. So no countries to show in the select tag.
See your issue in this demo:
(function() {
var app = angular.module("app", []);
app.controller("addLocationCtrl", ["$scope",
function($scope) {
$scope.countries = [{
"id_country": "1",
"country": "Austria"
}, {
"id_country": "2",
"country": "Belgium"
}, {
"id_country": "3",
"country": "Bulgaria"
}, {
"id_country": "4",
"country": "Croatia"
}, {
"id_country": "5",
"country": "Cyprus"
}, {
"id_country": "6",
"country": "Czech Republic"
}, {
"id_country": "7",
"country": "Denmark"
}, {
"id_country": "8",
"country": "Estonia"
}, {
"id_country": "9",
"country": "Finland"
}, {
"id_country": "10",
"country": "France"
}, {
"id_country": "11",
"country": "Germany"
}, {
"id_country": "12",
"country": "Greece"
}];
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="addLocationCtrl">
<div class="form-group">
<label>Country</label>
<select class="form-control" data-ng-model="countries" data-ng-options="c.id_country as c.country for c in countries"></select>{{countries}}
</div>
<div class="form-group">
<label>Province</label>
<select class="form-control" data-ng-model="provinces" data-ng-options="p.id_province as p.province for p in provinces">
</select>
</div>
</div>
</div>
Solution: Replace data-ng-model="countries" by other name.
data-ng-model="currentCountryId" and data-ng-model="currentProvinceId".
(function() {
var app = angular.module("app", []);
app.controller("addLocationCtrl", ["$scope",
function($scope) {
$scope.countries = [{
"id_country": "1",
"country": "Austria"
}, {
"id_country": "2",
"country": "Belgium"
}, {
"id_country": "3",
"country": "Bulgaria"
}, {
"id_country": "4",
"country": "Croatia"
}, {
"id_country": "5",
"country": "Cyprus"
}, {
"id_country": "6",
"country": "Czech Republic"
}, {
"id_country": "7",
"country": "Denmark"
}, {
"id_country": "8",
"country": "Estonia"
}, {
"id_country": "9",
"country": "Finland"
}, {
"id_country": "10",
"country": "France"
}, {
"id_country": "11",
"country": "Germany"
}, {
"id_country": "12",
"country": "Greece"
}];
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="addLocationCtrl">
<div class="form-group">
<label>Country</label>
<select class="form-control" data-ng-model="currentCountryId" data-ng-options="c.id_country as c.country for c in countries"></select>{{countries}}
</div>
<div class="form-group">
<label>Province</label>
<select class="form-control" data-ng-model="currentProvinceId" data-ng-options="p.id_province as p.province for p in provinces">
</select>
</div>
</div>
</div>
I am working with Kendo UI and angular grid application. In my application I define Kendo TabStrip. In first tab I have Kendo UI grid with data and second tab contains appropriate textbox fields, which are to be filled when user select some row in a grid. My grid is populated with data when load page and it work perfectly, but data binding to textbox fields not working. How to bind data on textbox fields when user select row in a grid?
This is my JSON data (which is in separate file):
[
{ "Id": 1, "AccountNo": "10236", "PostingDate": "20.01.2015", "MaturityDate": "24.01.2015", "Description": "description1", "DocumentType": "doc1" },
{ "Id": 2, "AccountNo": "10648", "PostingDate": "26.01.2015", "MaturityDate": "28.01.2015", "Description": "description2", "DocumentType": "doc2" },
{ "Id": 3, "AccountNo": "10700", "PostingDate": "22.01.2015", "MaturityDate": "25.01.2015", "Description": "description3", "DocumentType": "doc3" },
{ "Id": 4, "AccountNo": "10810", "PostingDate": "24.01.2015", "MaturityDate": "27.01.2015", "Description": "description4", "DocumentType": "doc4" },
{ "Id": 5, "AccountNo": "10101", "PostingDate": "29.01.2015", "MaturityDate": "30.01.2015", "Description": "description5", "DocumentType": "doc5" },
{ "Id": 6, "AccountNo": "10364", "PostingDate": "25.01.2015", "MaturityDate": "31.01.2015", "Description": "description6", "DocumentType": "doc6" }
]
This is my angular service (which is in separate file):
angular.module("app").factory('myService', function ($http) {
return {
getAll: function (onSuccess, onError) {
return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {
onSuccess(data);
}).error(function (data, status, headers, config) {
onError(data);
});
}
}
});
This is my controller (which is in separate file):
var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {
$scope.tabStrip = null;
$scope.$watch('tabStrip', function () {
$scope.tabStrip.select(0);
});
$scope.masterDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
url = "/Scripts/app/data/json/master/masterGridData.js",
myService.getAll(function (data) {
options.success(data);
}).error(function (data) {
options.error(data);
})
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
AccountNo: { type: "string" },
PostingDate: { type: "string" },
MaturityDate: { type: "string" },
Description: { type: "string" },
DocumentType: { type: "string" }
}
}
},
pageSize: 16
});
$scope.gridMaster = {
columns: [
{ field: "Id", hidden: true },
{ field: "AccountNo", title: "Account No", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
{ field: "PostingDate", title: "Posting Date", width: "70px" },
{ field: "MaturityDate", title: "Maturity Date" width: "70px" },
{ field: "Description", title: "Description", width: "170px" },
{ field: "DocumentType", hidden: true }
],
dataSource: $scope.masterDataSource,
selectable: true,
filterable: true,
scrollable: true,
pageable: {
pageSize: 16,
//refresh: true,
pageSizes: ["50", "100", "200", "All"]
},
toolbar: [{
name: "create"
}]
};
});
This is my HTML:
<html>
<head>
<!-- css and javaScript files -->
</head>
<body ng-app="app" ng-controller="myController">
<div class="divH3Style">
<h3 class="h3LabelForm">Grid Master</h3>
</div>
<div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip">
<ul>
<li>Overview</li>
<li>Update</li>
</ul>
<div id="tabstrip-1">
<div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">
</div>
</div>
<div id="tabstrip-2" style="overflow: hidden">
<div id="tabStrip2Half1">
<div class="divHeightStyle">
<label for="accountNumber" class="labelTextSize">Account Number:</label>
<input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="masterDataSource.data.AccountNo" placeholder="Account Number" />
</div>
<div class="datepickerStyle">
<label for="postingDate" class="labelTextSize">Posting Date:</label>
<input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="masterDataSource.data.PostingDate" />
</div>
<div class="divHeightStyle">
<label for="desccription" class="labelTextSize">Description:</label>
<input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="masterDataSource.data.Description" />
</div>
<div class="datepickerStyle">
<label for="maturityDate" class="labelTextSize">Maturity Date:</label>
<input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="masterDataSource.data.MaturityDate" />
</div>
</div>
<div id="tabStrip2Half2">
<div class="divHeightStyle">
<label for="documentType" class="labelTextSize">Document Type:</label>
<input id="documentType" type="text" class="k-textboxField" name="documentType" placeholder="Document Type" ng-model="masterDataSource.data.DocumentType" />
</div>
<div>
<button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
<button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
Any help will be very useful.
I am solve that problem. I was added change event function in $scope.gridMaster:
$scope.gridMaster = {
...
change: function () {
var dataItem = this.dataItem(this.select());
$scope.accountNumber = dataItem.AccountNo;
$scope.postingDate = dataItem.PostingDate;
$scope.description = dataItem.Description;
$scope.maturityDate = dataItem.MaturityDate;
$scope.documentType = dataItem.DocumentType;
}
}
And I was change ng-model in my HTML page:
<div id="tabstrip-2" style="overflow: hidden">
<div id="tabStrip2Half1">
<div class="divHeightStyle">
<label for="accountNumber" class="labelTextSize">Account Number:</label>
<input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="accountNumber" placeholder="Account Number" />
</div>
<div class="datepickerStyle">
<label for="postingDate" class="labelTextSize">Posting Date:</label>
<input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="postingDate" />
</div>
<div class="divHeightStyle">
<label for="desccription" class="labelTextSize">Description:</label>
<input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />
</div>
<div class="datepickerStyle">
<label for="maturityDate" class="labelTextSize">Maturity Date:</label>
<input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="maturityDate" />
</div>
</div>
<div id="tabStrip2Half2">
<div class="divHeightStyle">
<label for="documentType" class="labelTextSize">Document Type:</label>
<input id="documentType" type="text" class="k-textboxField" name="documentType" placeholder="Document Type" ng-model="documentType" />
</div>
<div>
<button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
<button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
</div>
</div>
</div>