자동 완성 텍스트 <p></p> 내가 텍스트 상자를 가지고 있고이 버튼 테이블이 완전히

Question

내가 AngularJS와 새로운 오전 테이블에 추가하지 않습니다

때마다 추가 버튼을 사용자가 클릭 텍스트 상자의 데이터 테이블에 추가 될 것이다 : 여기 내 코드에 대한 링크입니다 : code

모든 것이 잘 작동,하지만 그것은 재미 행동을 시작 자동 완성 때, 자동 완성 itselfe 잘 작동하지만, 예를 들어, 맛보게을 추가 할 경우 자동 완성 sugge sts actionscript 그런 다음 전체 단어를 작성하는 대신 suggestins에서 단어를 선택하면 입력 한 문자가 추가됩니다 (예 :이 예제에서는 actionscript 대신 acti).

<script> 
var app = angular.module('app', []); 
app.factory('Service', function() { 
    var typesHash = [ { 
     id :1, 
     name : 'lemon', 
     price : 100, 
     unit : 2.5 
    }, { 
     id : 2, 
     name : 'meat', 
     price : 200, 
     unit : 3.3 
    } ]; 

    var localId = 3; 
    availableTags = [ 
         "ActionScript", 
         "AppleScript", 
         "Asp", 
         "BASIC", 
         "C", 
         "C++", 
         "Clojure", 
         "COBOL", 
         "ColdFusion", 
         "Erlang", 
         "Fortran", 
         "Groovy", 
         "Haskell", 
         "Java", 
         "JavaScript", 
         "Lisp", 
         "Perl", 
         "PHP", 
         "Python", 
         "Ruby", 
         "Scala", 
         "Scheme" 
        ]; 
    var service = { 
     addTable : addTable, 
     getData : getData, 
     complete:complete 


    }; 
    return service; 
    function complete(){ 
     $("#txt").autocomplete({ 
      source: availableTags, 
      messages: { 
       noResults: '', 
       results: function() {} 
      } 
     }); 
     } 
    function addTable(name,price) { 
     typesHash.push({id:localId++, name:name, price:price,unit:1}); 
    } 
    function getData() { 
     return typesHash; 
    } 
}); 
app.controller('table', function(Service) { 
    //get the return data from getData funtion in factory 
    this.typesHash = Service.getData(); 
    //get the addtable function from factory 
    this.addTable = Service.addTable; 
    this.complete=Service.complete; 
}); 
</script> 

사람이 도움이 될 수 있습니다

또한 여기에 내 코드? (또한이 내 프로젝트의 작은 버전은 주목할 만하다 내가 사용하는 몇 가지 이유로 공장)

업데이트 :

typesHash.push({id:localId++, name:$("#txt").val(), price:price,unit:1}); 

대신 :

를

하나의 방법이 사용하는 것입니다

typesHash.push({id:localId++, name:name, price:price,unit:1}); 

하지만 더 좋은 방법이있을 것이라고 확신합니다. 어떤 생각입니까?

Answer 1

도움이 될 것 하메드 Minaee 나는 조금 늦게 모르지만, 여기 당신을위한 솔루션입니다 : -

당신은

$("#txt").on("autocompleteselect", function(event, ui) { 
    $scope.tableTools.inputData=ui.item.value; 
    }); 

를 추가하고 $scope을 통과 기억해야

서비스 별 컨트롤러 업데이트 서비스

Plunker위한 http://plnkr.co/edit/RqTDNRHpUicmFPsYsQR9?p=preview

Answer 2

코드의 문제점은 다음과 같습니다 각도는, JQuery와 변화에 대한

그래서 당신은 $("#txt").autocomplete(...를 통해 입력 된 텍스트를 변경할 때 각도를 인식하지 플러그인에 의해 만들어진 업데이트를 인식하지 않습니다 그래서 당신의 "inputData" 업데이트하지 마라 !!

는 여전히를 업데이트하지 자동 완성 에서 선택할 때 당신이 볼 수 있듯이, inputData을 인쇄하는 것이 여기에, updated plunker을 문제를 강조하기 위해, 당신은 테이블에 inputData에서 정보를 가지고 있기 때문에, 당신은 바람직하지를 얻을 수 목!.

는 해결책 : 당신은 각도에 directiveapply 그 변경 사항을 구축 할 필요가있다. this answer에서
봐가 미안 이봐 당신에게