<!DOCTYPE html>
<html lang="en">
<head>
<title>Account Mapping Maintenance </title>
<!-- Bootstrap -->
<link href="./vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="./vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="./build/css/custom.min.css" rel="stylesheet">
<link href="https://unpkg.com/ng-table@4.0.0/bundles/ng-table.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body class="nav-md" ng-app="myApp" ng-controller="AccountMappingCtrl as vm">
<input client-complete class="form-control" ng-model="vm.client.COMPANY_DESC" placeholder="enter name" type="text">
<input client-complete class="form-control" ng-model="vm.client.COMPANY_ID" placeholder="enter name" type="hidden">
<!-- Angular CDN -->
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
<script src="https://unpkg.com/ng-table@4.0.0/bundles/ng-table.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<!-- jQuery -->
<script src="./vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="./vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="./vendors/fastclick/lib/fastclick.js"></script>
<!-- Custom Theme Scripts -->
<script src="./build/js/custom.min.js"></script>
<script src="./Controller/main.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>
(function (angular) {
'use strict';
var app = angular.module('myApp', [ 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngResource']);
app.directive('clientComplete',['$filter',clientCompleteDir]);
app.controller('AccountMappingCtrl', ['$scope', '$http', 'NgTableParams', AccountMappingcontroller]);
function AccountMappingcontroller($scope, $http, NgTableParams) {
//-------------------------------------------------------------------------------------------------
var vm = this;
vm.client ={COMPANY_ID:'', COMPANY_DESC:''};
/*
Response : "[{\"COMPANY_ID\":\"10001\",\"COMPANY_DESC\":\"THIRDROCK\",\"COMPANY_CURRENCY\":\"AUS\",\"ACTIVE\":true,\"IS_HEADOFFICE\":true,\"ACCOUNTING_SYSTEM_ID\":\"1\"},
{\"COMPANY_ID\":\"10002\",\"COMPANY_DESC\":\"OBN TECH\",\"COMPANY_CURRENCY\":\"INR\",\"ACTIVE\":true,\"IS_HEADOFFICE\":true,\"ACCOUNTING_SYSTEM_ID\":\"1\"}]"
*/
$http.get("http://localhost:52087/api/companydetails").then(function(response) {
var convertToJson = angular.fromJson(response.data);
$scope.dataSource = convertToJson;
});
$scope.dataSource = [{'COMPANY_ID':'10001','COMPANY_DESC':'THIRDROCK','COMPANY_CURRENCY':'AUS','ACTIVE':true,'IS_HEADOFFICE':true,'ACCOUNTING_SYSTEM_ID':'1'},{'COMPANY_ID':'10002','COMPANY_DESC':'OBN TECH','COMPANY_CURRENCY':'INR','ACTIVE':true,'IS_HEADOFFICE':true,'ACCOUNTING_SYSTEM_ID':'1'}];
$scope.setClientData = function(item){
if (item){
vm.client = item;
}
}
} //controller
//directive
function clientCompleteDir($filter) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
elem.autocomplete({
source: function (request, response) {
//term has the data typed by the user
var params = request.term;
//simulates api call with odata $filter
var data = scope.dataSource;
if (data) {
var result = $filter('filter')(data, {COMPANY_DESC:params});
angular.forEach(result, function (item) {
item['value'] = item['COMPANY_DESC'];
});
}
response(result);
},
minLength: 1,
select: function (event, ui) {
//force a digest cycle to update the views
scope.$apply(function(){
scope.setClientData(ui.item);
});
},
});
}
};
}
})(angular);
/* Styles go here */