Angularjs 文本框中的自动完成文本不会完全添加到表中

我对angularjs不熟悉

我有一个文本框，还有一个按钮和表格：

每当用户单击“添加”按钮时，文本框中的数据将添加到表中： 以下是指向我的代码的链接：

一切都很好，但当涉及到自动完成时，它开始表现得很有趣， 自动完成本身工作正常，但如果例如添加acti，自动完成建议使用actionscript，那么如果不是从建议中选择整个单词，而是只添加您键入的字符，例如在本例中，是acti而不是actionscript

这是我的代码：

<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:name, price:price,unit:1});

---

但我相信有更好的方法。。。有什么想法吗？

代码的问题是：angular不知道jquery所做的更新 插件

因此，当您通过$txt.autocomplete更改输入文本时。。。用户不知道更改，因此您的inputData不会更新

为了强调这个问题，在这里打印inputData，正如您从autocomplete中选择时所看到的，它仍然没有更新，并且因为您将inputData中的信息带到表中，所以得到了不需要的项

解决方案： 您需要构建一个指令，将您的更改应用于angular。

---

看看它可能对你有帮助

嘿，对不起，哈米德·米纳伊，我来晚了一点，但这里有一个解决方案：-

您需要添加

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

并记住将$scope传递给服务，以便按服务更新控制器

---

Plunker for you

我不太了解角度工厂，但我知道为什么输入与插入的对象不同。这是因为您通过javascript而不是angularjs更新值。因此，虽然从你的眼睛是ABC，但在angularjs是一个。你需要更新的角度模型。以下内容与您的案例类似，谢谢您，但我无法使我的代码与之一起工作，可能是因为我是angular的新手…非常感谢现在问题更清楚了唯一的问题是我正在使用factory，我不知道如何应用。工厂内部的指令使其工作非常感谢：。您能解释一下这一行吗：$txt.on autocompleteselect，function event，ui{$scope.tablettools.inputData=ui.item.value；}；}例如，什么是autocompleteselect，或者您从何处获得ui和事件？这是一个事件，当您从autocomplete下拉菜单中的元素列表中选择元素时将调用该事件。在ui中，您拥有所选的项，而我只是通过调用ui.item.value使用了它的值。希望现在清除它。如果您满意，请接受答案在这里，你可以找到更多你可以使用的事件。很高兴帮助你。你在HTML ng model=tableTools.inputData中绑定了值。它绑定到$scope，但这个插件是jquery插件，所以它处理的是id=txt，它没有绑定到angular js，这就是为什么我将$scope传递给服务来绑定到angular js。

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