help me please I have an error wanting to put paginarion (dirpagination) to my table with inline angular edit js, I do not know why I get this error since in my other tables of just showing data it's all right, but in this table I'm with an editable method calling an ng-include. this is my table in html:
<table class="table table-bordered table-bordered">
<tr>
<th>
<a href="#" ng-click="orderByField='FirstName'; reverseSort = !reverseSort">
First Name <span ng-show="orderByField == 'FirstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
</a>
</th>
<th>Last Name</th>
<th>Hire Date</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Opciones</th>
</tr>
<tbody>
<tr dir-paginate="employee in Employees | filter: search | orderBy:orderByField:reverseSort | itemsPerPage :25" ng-include="getTemplate(employee)">
<script type="text/ng-template" id="display">
<td>{{employee.FirstName}}</td>
<td>{{employee.LastName}}</td>
<td>{{employee.HireDate | date: 'dd-MM-yyyy' }}</td>
<td>{{employee.Address}}</td>
<td>{{employee.City}}</td>
<td>{{employee.PostalCode}}</td>
<td>{{showCountry(employee.CountryID) }}</td>
<td>
<button type="button" class="btn btn-primary" ng-click="editEmployee(employee)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="deleteEmployee(employee)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model=employee.FirstName class="form-control input-sm" /></td>
<td><input type="text" ng-model=employee.LastName class="form-control input-sm" /></td>
<td><datepicker date-format="dd-MM-yyyy"><input type="text" ng-model="employee.HireDate" class="form-control input-sm" /></datepicker></td>
<td><input type="text" ng-model=employee.Address class="form-control input-sm" /></td>
<td><input type="text" ng-model=employee.City class="form-control input-sm" /></td>
<td><input type="text" ng-model=employee.PostalCode class="form-control input-sm" /></td>
<td>
<select ng-model="employee.CountryID" @*ng-selected="employee.CountryID" ng-options="I.CountryID as I.CountryName for I in CountryList"*@ class="form-control input-sm">
<option ng-repeat="value in CountryList"
ng-selected="employee.CountryID == value.CountryID"
value="{{value.CountryID}}">
{{value.CountryName}}
</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary" ng-click="updateEmployee(employee)">Save</button>
<button type="button" class="btn btn-danger" ng-click="reset($index)">Cancel</button>
</td>
</script>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="5"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
here my controller:
angular.module ("MyApp", ['angularUtils.directives.dirPagination', '720kb.datepicker', 'chieffancypants.loadingBar', 'ngAnimate'])
.config(function (cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = true;
})
.controller('PartGrider', function ($scope, EmployeeService, $timeout, cfpLoadingBar) {
$scope.orderByField = 'FirstName';
$scope.reverseSort = false;
$scope.Employees = [];
$scope.employeeData = {};
$scope.selected = {};
$scope.CountryList = null;
$scope.open = function ($event, employee) {
$event.preventDefault();
$event.stopPropagation();
employee.isOpen = true;
};
$scope.showCountry = function (data) {
var obj = null;
angular.forEach($scope.CountryList, function (val) {
if (val.CountryID == data) {
obj = val.CountryName;
}
});
return obj;
}
EmployeeService.GetCountry().then(function (d) {
$scope.CountryList = d.data;
}, function (error) {
alert("Error");
});
EmployeeService.GetEmployeesList().then(function (d) {
$scope.Employees = d.data;
}, function (error) {
alert("Error!!!!");
});
$scope.actualizaMatriz = function () {
EmployeeService.GetEmployeesList().then(function (d) {
$scope.Employees = d.data;
}, function (error) {
alert("Error!!!!");
});
}
$scope.addEmployeetoDB = function () {
$scope.employeeData = {
FirstName: $scope.FirstName,
Address: $scope.Address,
City: $scope.City,
};
EmployeeService.AddEmployee(employeeData).then(function (d) {
alert(d);
})
EmployeeService.GetEmployeesList().then(function (d) {
$scope.Employees = d.data;
}, function (error) {
alert("Error!!!!");
});
};
$scope.deleteEmployee = function (employee) {
$scope.employeeData = {
FirstName: $scope.FirstName,
Address: $scope.Address,
City: $scope.City,
};
EmployeeService.DeleteEmployee(employee).then(function (d) {
alert(d);
$scope.actualizaMatriz();
});
EmployeeService.GetEmployeesList().then(function (d) {
$scope.Employees = d.data;
}, function (error) {
alert("Error!!!!");
});
};
$scope.updateEmployee = function (employee) {
$scope.employeeData = {
FirstName: $scope.FirstName,
Address: $scope.Address,
City: $scope.City,
};
EmployeeService.UpdateEmployee(employee).then(function (d) {
alert(d);
$scope.reset();
$scope.actualizaMatriz();
});
};
$scope.getTemplate = function (employee) {
if (employee.EmployeeID === $scope.selected.EmployeeID) {
return 'edit';
}
else return 'display';
};
$scope.reset = function (index) {
$scope.Employees[index] = $scope.selected;
$scope.selected = {};
}
$scope.editEmployee = function (employee) {
$scope.selected = angular.copy(employee);
};
$scope.start = function () {
cfpLoadingBar.start();
};
$scope.complete = function () {
cfpLoadingBar.complete();
}
// fake the initial load so first time users can see it right away:
//$scope.start();
//$scope.fakeIntro = true;
//$timeout(function () {
// $scope.complete();
// $scope.fakeIntro = false;
//}, 750);
})
.factory('EmployeeService', function ($http, $q) {
var fac = {};
fac.GetCountry = function () {
return $http.get('/Data/GetCountries')
}
fac.GetEmployeesList = function () {
return $http.get('/Data/GetEmployeeList')
}
fac.AddEmployee = function (data) {
var defer = $q.defer();
$http({
url: '/Data/AddEmployee',
method: 'POST',
data: JSON.stringify(data),
headers: { 'content-type': 'application/json' }
}).success(function (d) {
defer.resolve(d);
}).error(function (e) {
alert("Error!!!!");
defer.reject(e);
});
return defer.promise;
}
fac.DeleteEmployee = function (data) {
var defer = $q.defer();
$http({
url: '/Data/DeleteEmployee',
method: 'POST',
data: JSON.stringify(data),
headers: { 'content-type': 'application/json' }
}).success(function (d) {
defer.resolve(d);
}).error(function (e) {
alert("Error!!!!");
defer.reject(e);
});
return defer.promise;
}
fac.UpdateEmployee = function (data) {
var defer = $q.defer();
$http({
url: '/Data/UpdateEmployee',
method: 'POST',
data: JSON.stringify(data),
headers: { 'content-type': 'application/json' }
}).success(function (d) {
defer.resolve(d);
}).error(function (e) {
alert("Error!!!!");
defer.reject(e);
});
return defer.promise;
}
return fac;
})
.filter('active', function () {
return function (input) {
if (input == '1')
return 'Yes';
else
return 'No';
};
})
.filter('dateFilter', function () {
return function (item) {
if (item != null) {
return new Date(parseInt(item.substr(6)));
}
return "";
}
});
The error is that it does not show me anything in the table and in the chrome console I get this:
angular.js:11655 TypeError: Cannot read property 'EmployeeID' of undefined
at ChildScope.$scope.getTemplate (PartGrid.js:157)
at $parseFunctionCall (angular.js:12404)
at Object.expressionInputWatch (angular.js:12813)
at Scope.$digest (angular.js:14300)
at Scope.$apply (angular.js:14571)
at bootstrapApply (angular.js:1455)
at Object.invoke (angular.js:4203)
at doBootstrap (angular.js:1453)
at bootstrap (angular.js:1473)
As I understand it is the error in the getTemplate method of my controller, I do not know what to do in this case.