Question

我是angularjs的新手，

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

每当用户点击添加按钮时，文本框中的数据都会添加到表格中：这是我的代码的链接： code

一切正常，但是当谈到自动完成时，它开始表现得很有趣，自动完成itselfe工作正常，但是如果例如添加acti并且自动完成建议动作脚本那么如果不是写整个单词，则从建议中选择它只是你输入的字符将被添加，例如在这个例子中acti而不是actionscript。 / p>

这里也是我的代码：

<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

嘿抱歉Hamed Minaee我迟到了，但这里有解决方案： -

您需要添加

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

请记住通过服务将$scope传递给服务以进行控制器更新。

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

Answer 2

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

因此，当您通过$( "#txt" ).autocomplete(...更改输入文字时，角度不知道更改，因此您的＆＃34; inputData＆＃34;不更新!!

要强调此问题，请点击此处updated plunker打印inputData，您可以看到从自动填充中选择 时仍未更新 ，并且因为你从inputData获取信息到表，你得到了不受欢迎的项目！

解决方案： 你需要建立directive apply你对角度的更改看看this answer它可以帮到你

文本框中的自动填充文本不会完全添加到表中

2 个答案: