2016-06-29 3 views
0

여러 입력에 자동 완성을 사용하려고합니다. 버튼을 클릭하면 모든 입력이 표시됩니다. 나는 수업을 이용해 그것을하려고 노력하고있다.Jquery 클릭 후 입력란에 자동 완성

<div layout = "row" ng-repeat="project in projects">  
    <div layout = "column" layout-align="center center" flex="33"> 
     <md-input-container> 
      <label>Project Name</label> 
       <input class="autoc" type="text" placeholder="{{project.id}}" ng-keyup="myFunct($event)"> 
     </md-input-container> 
    </div> 
</div> 

여기 호출되고 버튼 setCity 기능을 클릭에 코드 - 내 컨트롤러 : 여기 는 HTML입니다. 그것은 프로젝트 배열을 채우고 또한 jquery 코드가 그 안에 기록됩니다.

$scope.items = ['item1', 'item2', 'item3']; 

$scope.setCity =function(cityname) { 
    $scope.projects = []; 
    for (var key in $scope.list) { 
     if ($scope.list[key].city == cityname.toLowerCase()) { 
      $scope.projects.push($scope.list[key]); 
     } 
    } 

    $(".autoc").autocomplete({ 
     autoFocus: true, 
     source: $scope.items 
    }); 

}; 

입력란에는 자동 완성 기능이 작동하지 않습니다. 다른 제안도 환영합니다. 미리 감사드립니다.

+0

를 사용합니다. 이것은 문제 일 수 있습니다. jQuery로 복잡하게하는 것보다 더 많은 각도를 사용하십시오. - http://jsfiddle.net/swfjT/5205/ –

+0

나는 그렇게 생각했습니다. 나는 내가 원하는 것을하기 위해 대안을 찾을 수 없다. –

답변

-1

1 - 당신은 동일한 클래스

<div ng-app='MyModule'> 
    <div ng-controller='DefaultCtrl'> 
     <input auto-complete ui-items="names" ng-model="selected"> 
     <input auto-complete ui-items="names" ng-model="selected"> 
     selected = {{selected}} 
    </div> 
</div> 

2로 HTML 코드에서 여러 입력을해야 - 다음 요소는 동적으로 DOM에 추가됩니다 JS 코드

angular.module('MyModule', []).directive('autoComplete', function($timeout) { 
    return function(scope, iElement, iAttrs) { 
      iElement.autocomplete({ 
       source: scope[iAttrs.uiItems], 
       select: function() { 
        $timeout(function() { 
         iElement.trigger('input'); 
        }, 0); 
       }