7

ここで発生している問題の JSFiddle を作成しました: http://jsfiddle.net/9qxFK/4/

小文字、数字、およびハイフンのみを許可する入力フィールドがあります (このフィールドは URL で使用されます)。

これを行うために、次の angular.js コントローラー メソッドがあります。

$scope.auto_slug = function() {
    $scope.slug = $scope.slug.toLowerCase().replace(/[^a-z0-9\-\s]/g, '').replace(/\s+/g, '-');
};

無効な文字の後に有効な文字が入力された場合にのみ、無効な文字が削除されます。

なぜこれがうまくいかないのか誰か教えてもらえますか？

ありがとう、スコット

4

1 に答える 1

16

コントローラーでそれを行う代わりに、次のようなディレクティブを使用する必要があります。

app.directive('restrict', function($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, iElement, iAttrs, controller) {
            scope.$watch(iAttrs.ngModel, function(value) {
                if (!value) {
                    return;
                }
                $parse(iAttrs.ngModel).assign(scope, value.toLowerCase().replace(new RegExp(iAttrs.restrict, 'g'), '').replace(/\s+/g, '-'));
            });
        }
    }
});​

そして、次のように使用しますinput。

<input restrict="[^a-z0-9\-\s]" data-ng-model="slug" ...>

jsFiddle: http://jsfiddle.net/9qxFK/5/

于 2012-12-18T13:36:50.157 に答える