jQuery+AngularJS的问题?

  • 回答 (2)
  • 关注 (0)
  • 查看 (53)

希望添加一个字段来使用jqueryui中的自动完成

jQuery脚本:

$(function () {

    $('#txtProduct').autocomplete({
        source: function (request, response) {

            alert(request.term);

        },
        minLength: 3,
        select: function (event, ui) {

        }
    });

});
  • 必须在AngularJS的自定义指令中初始化来自jQueryUI的自动完成小部件,例如:
<div ng-app="TestApp">
    <h2>index</h2>
    <div ng-controller="TestCtrl">

        <input type="text" auto-complete>ddd</input>

    </div>
</div>

或者

<script type="text/javascript">

    var app = angular.module('TestApp', []);

    function TestCtrl($scope) { }

    app.directive('autoComplete', function () {
        return function postLink(scope, iElement, iAttrs) {

            $(function () {
                $(iElement).autocomplete({
                    source: function (req, resp) {
                        alert(req.term);
                    }
                });
            });

        }
    });

</script>
MOISTGMOISTG提问于
萌萌呆想玩游戏却不知道这么开机的吃瓜少年。回答于

或者尝试下这个函数:

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {
            //this is where you'd set up your source... could be an external source, I suppose. 'something.php'
            return ['apples', 'oranges', 'bananas'];
        }
    }
}]);

设置指令:

app.directive('autoComplete', function(autoCompleteDataService) {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
                    // elem is a jquery lite object if jquery is not present,
                    // but with jquery and jquery ui, it will be a full jquery object.
            elem.autocomplete({
                source: autoCompleteDataService.getSource(), //from your service
                minLength: 2
            });
        }
    };
});

选择一个数值:

<div ng-controller="Ctrl1">
    <input type="text" ng-model="foo" auto-complete/>
    Foo = {{foo}}
</div>

回答过的其他问题

腾讯云SCF无服务器云函数有哪些应用?

萌萌呆想玩游戏却不知道这么开机的吃瓜少年。
推荐
可以用 SCF 无服务器云函数定时备份数据库 mysqldump 准备 常用来导出数据库备份数据的的 mysqldump 工具,在云函数中也同样能使用;但是由于云函数环境并未内置 mysqldump,因此我们要自行打包工具。 通过 mysql 社区版下载地址,选择操作系统为 Li...... 展开详请

如何使用Serverless框架?

萌萌呆想玩游戏却不知道这么开机的吃瓜少年。
我说一个比较新颖的,使用 Serverless 进行 AI 预测推理 模型准备 在这里我们使用 TensorFlow 中的 MNIST 实验作为案例来进行下面的介绍。MNIST 是一个包含了 6 万训练图片和 1 万测试图片的手写数字图片集合,图片为 28x28-pixel 大小...... 展开详请

如何从零开始搭建一款小程序?

萌萌呆想玩游戏却不知道这么开机的吃瓜少年。
说到小程序,不得不提小游戏,那么如何从零快速搭建小游戏呢?什么是小游戏? 从普通用户的视角看,小游戏是小程序的一个子类目,可在微信内被便捷的获取和传播,即点即玩,具备出色的用户体验。小游戏是小程序,普通用户分不清也无需分清。 同时,从开发者的视角,它可以看作是基于 Canvas/...... 展开详请

腾讯智能钛机器学习平台是免费的吗?

萌萌呆想玩游戏却不知道这么开机的吃瓜少年。

如何在JavaFX中的所有表单元格上设置工具提示?

萌萌呆想玩游戏却不知道这么开机的吃瓜少年。
已采纳
设置表后(即创建并添加列,并在所有列上设置单元工厂),可以“装饰”列的单元工厂: private <T> void addTooltipToColumnCells(TableColumn<TableDataType,T> column) { Callback<Tabl...... 展开详请

区块链能给游戏带来什么?

萌萌呆想玩游戏却不知道这么开机的吃瓜少年。
优化棋牌、答题等品类的信任机制。 历史悠久的棋牌游戏和去年刚兴起的答题游戏,都面临着一个共同的问题,即用户对于运营方的信任问题。比如,邀请我的好友是真人还是AI?你所说的100万奖金池是不是真的有这么多人来分?这也是相关受众的核心痛点之一。 区块链技术中应用到的去中介化、智能合约...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券