0
Angular.JS를 처음 사용했습니다. 나는 지난 6 시간 동안 고생하고있다.TypeError : elem.autocomplete가 함수가 아닙니다.
HTTP에서 데이터를 읽고 자동 완성 상태로보기로 되돌려 보냅니다. 이전에는 선택 상자였습니다. 선택 상자에서 자동 완성으로 변경하기로 결정했습니다.
Plunker 링크 : http://embed.plnkr.co/MbhALuekWNDqnYFyjbOF/ 여기
는 두 개의 값을 반환해야합니다. 하나는 ID이고 다른 하나는 설명입니다. 사용자가 설명으로 검색을 진행하기 때문입니다. 각각의 사용자 선택의 ID를 되돌려 보내야합니다.
오류 :
angular.min.js:124 TypeError: elem.autocomplete is not a function
at Object.link (main.js:217)
at angular.min.js:17
at wa (angular.min.js:85)
at q (angular.min.js:71)
at f (angular.min.js:62)
at q (angular.min.js:71)
at f (angular.min.js:62)
at f (angular.min.js:62)
at f (angular.min.js:62)
at f (angular.min.js:62) "<input client-complete="" class="form-control ng-pristine ng-untouched ng-valid" ng-model="vm.client.COMPANY_DESC" placeholder="enter name" type="text">"
(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:''};
/* $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);<!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/[email protected]/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/[email protected]/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>
감사 (THIRDROCK 입력을 시작). 그것은 효과가있다. –