文本框中的自动完成文本不会完全添加到表格中 [英] autocompleted text in textbox does not add to table completely

问题描述

我是 angularjs 的新手，

I am new to angularjs,

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

I have a textbox and I have a button and table:

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

whenever user click on add button the data in the textbox would be added to the table: here is the link to my code: code

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

everything works fine, but when it comes to autocomplete it starts acting funny, the autocomplete itselfe works fine but if for example add acti and the autocomplete suggests actionscript then if instead of writing the whole word you choose it from suggestins just he characters that you typed would be added, for example in this example acti instead of 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>

有人可以帮忙吗?(另外值得注意的是，这是我项目的较小版本，出于某种原因我使用了工厂)

can anyone help? (also it is noteworthy that this is a smaller version of my project and for some reason I used factory)

更新:

一种方法是使用:

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

而不是:

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

但我相信有更好的方法......有什么想法吗?

But I am sure there is a better way... Any idea?

推荐答案

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

Hey sorry Hamed Minaee I am little late but here is the solution for you :-

您需要添加

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

并且记住将 $scope 传递给服务，以便通过服务进行控制器更新.

And remember to pass $scope to the service for controller updation by service.

Plunker 为您服务 http://plnkr.co/edit/RqTDNRHpUicmFPsYsQR9?p=preview

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

这篇关于文本框中的自动完成文本不会完全添加到表格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！