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

Question

我是 angularjs,

的新手

我有一个文本框和一个按钮 table:

只要用户点击添加按钮，文本框中的数据就会添加到 table：这是我的代码的 link： code

一切正常，但当涉及到自动完成时，它开始表现得很滑稽，自动完成本身工作正常但是如果例如添加 acti 并且自动完成建议 actionscript 然后如果不是写整个单词你从 suggestins 中选择它只是他输入的字符将被添加，例如在这个例子中 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:$("#txt").val(), price:price,unit:1});

而不是：

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

但我确信有更好的方法...有什么想法吗？

Answer 1

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

因此，当您通过 $( "#txt" ).autocomplete(... 更改输入文本时，angular 并不知道更改，因此您的“inputData”不会更新！！

为了强调这个问题，这里 updated plunker 打印了 inputData，正如你在 select 从自动完成中看到的那样 它仍然未更新，并且因为您将信息从 inputData 获取到 table，您得到了不需要的项目！。

解决方法： 您需要构建一个 directive，apply 您对 angular 的更改。
看看this answer它可能对你有帮助

Answer 2

嘿，抱歉，Hamed Minaee 我来晚了，但这是适合您的解决方案:-

您需要添加

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

并记得将 $scope 传递给服务以供服务更新控制器。

你的笨蛋http://plnkr.co/edit/RqTDNRHpUicmFPsYsQR9?p=preview

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

autocompleted text in textbox does not add to table completely

angularjs

angular-ui

angularjs-directive

angularjs-scope