Question

我希望将输入与服务端REST API匹配以查看它是否有效，但如果它无效（并且您当前正在键入），则可以显示一个供您选择的选项列表。

我已经在jQuery中实现了这个，但需要在AngularJS中实现。这是最好的自定义指令还是控制器上的一组功能？

如果我去了自定义指令路由，我将如何进行此验证并提供要显示的（某些）列表。我可以做的所有显示代码，我主要关心的是如何构造和创建代码。

（未经测试/伪）代码

m.directive('validDevice', ['$http', function ($http) {
    return {
        require: 'ngModel',
        link: function (scope, ele, attrs, c) {
            scope.$watch(attrs.ngModel, function () {
                $http({
                    method: 'POST',
                    url: '/api/check/' + attrs.validDevice,
                    data: { 'device': attrs.validDevice }
                }).success(function (data, status, headers, cfg) {
                    c.$setValidity('validDevice', data.length == 1);

                    // Partials listed here here if data.length > 1
                    // What binds to this? Is this the best place to put this?
                }).error(function (data, status, headers, cfg) {
                    c.$setValidity('validDevice', false);
                });
            });
        }
    }
}]);

根据Monsiour Toph（史诗名称）的建议我已经创建了一个指令来进行验证，这是有效的，我正在尝试将typeahead用于自动建议列表，但是当我实现这个时字面上没有任何反应，ajax调用永远不会发生，并且盒子永远不会弹出。我直接从示例中复制了代码（因此应该加载位置）

    <input id="deviceToOperateOn"
           name="deviceToOperateOn"
           type="text"
           placeholder="Device Serial"
           ng-show="operatesOnSelector == 1"
           ng-model="device"
           ng-model-options="{ debounce: 200 }"
           valid-device="{{device}}"
           typeahead="address for address in getLocation($viewValue)" />

Answer 1

看看这个精彩的模块：http://angular-ui.github.io/bootstrap/

特别是页面底部的最后一个功能：预先输入

据我了解您的需要，这几乎就是您要实施的内容（建议清单）......

之后，使用自定义指令设置字段的有效性。

修改

针对typeahead指令的演示+ ngModel。$ validators：http://jsfiddle.net/msieurtoph/gqu60d0c/2/

HTML：

<div ng-controller="myCtrl as c"> <pre>scope.device = {{device}}</pre> <input id="deviceToOperateOn" name="deviceToOperateOn" type="text" placeholder="Device Serial" ng-show="operatesOnSelector == 1" ng-model="device" valid-device ng-model-options="{ debounce: 200 }" typeahead="value for value in values | filter:$viewValue" /> </div>

JS：

var app = angular.module('app', ['ui.bootstrap']); app.controller('myCtrl', function ($scope) { $scope.operatesOnSelector = 1; $scope.device = ''; $scope.values = [ 'phone', 'tv', 'desktop', 'washing machine']; }); app.directive('validDevice', ['$http', function ($http) { return { require: 'ngModel', link: function (scope, ele, attrs, ngModel) { ngModel.$validators.validDevice = function (modelValue, viewValue) { var value = modelValue || viewValue; console.log('validator validDevice is running for value : ', value); console.log('set to : ', scope.values.indexOf(value) !== -1); return scope.values.indexOf(value) !== -1; }; } } }]);

想一想：

将'ui.bootstrap'添加到主模块依赖注入。

链接到bootstrap css和angular-bootstrap js表

RTFM !! ...而不是虚拟复制粘贴代码，并抱怨：'它不起作用'。

顺便说一下，你的代码看起来真的很奇怪。

正如我所说，POST动词不应该用于'检查'操作。如果您已经有建议列表（=可能值列表），您甚至不需要请求服务器......

HTTP验证的自定义指令，如果找到部分匹配则显示弹出窗口

1 个答案: