1

簡単な Angular の例を次に示します。

<!DOCTYPE html>
<html ng-app="GenericFormApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>    
</head>
<body ng-controller="GenericFormCtrl as ctrl">    
    <div>
        Model: {{ctrl.model}}
    </div>
    <div>
        <input ng-model="ctrl.model" />
    </div>
    <div>
        <input type="button" value="Alert model" ng-click="ctrl.showModel();" />
    </div>
    <script>        
        angular.module("GenericFormApp", [])
            .controller("GenericFormCtrl", [function () {               
                this.showModel = function () { alert(this.model); };
            }])        
    </script>
</body>
</html>

上記は、Angular の基本的な機能であるモデルに入力をバインドする方法を示しています。

また、ユーザーは、入力内容を含むモーダル ダイアログをポップアップすることもできます。入力が空白のままになっている場合を除いて、これは正常に機能します。

その場合、「未定義」と表示されます。

もちろん、モデルの初期値を空白文字列に設定するコード行を単純に書くこともできますが、実際のアプリケーションでは多くの入力があり、ユーザーは任意の数の入力を残す可能性があるため、これは特に実用的ではありません。それらは空白です。

要するに、空白の入力にはモデルに空白の文字列が含まれている必要があることを Angular が認識できるようにする方法を知りたいのです。

4

2 に答える 2

2

カスタム ディレクティブを使用して、デフォルトの入力ディレクティブの動作を拡張します。したがって、入力にモデルがある場合、このディレクティブはこのモデルが未定義かどうかをチェックし、未定義の場合は空の文字列値を割り当てます。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app="GenericFormApp" ng-controller="GenericFormCtrl as ctrl">    
    
    <input ng-model="ctrl.model" /> {{ctrl.model}}<br>
    <input type="button" value="Alert model" ng-click="ctrl.showModel();" />
    
    <script>        
        angular.module("GenericFormApp", [])
            .controller("GenericFormCtrl", [function () { 
                this.showModel = function () { alert(this.model); };
            }])   
            .directive("input", function($parse) {
                return {
                    link: function(scope, element, attr, ngModelController) {
                        if (attr.ngModel) {
                            var model = $parse(attr.ngModel);
                            if (typeof model(scope) === 'undefined') {
                                model.assign(scope, '');    
                            }
                        }
                    }
                };
            });
    </script>
</div>

于 2015-09-14T21:54:08.503 に答える
0

私は@Claiesに同意しますが、特定の属性にこれが必要な場合は、ng-initを使用できます:

<input type="text" ng-init="ctrl.model = ctrl.model || ''" ng-model="ctrl.model"/>

または、入力要素に直接ではなく、「auto-init」などの特定のディレクティブを作成します。

于 2015-09-14T22:10:34.647 に答える