Question

这是一个简单的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的基本功能。

它还允许用户弹出带有输入内容的模态对话框。这项工作正常，除非输入留空。

在这种情况下，它会显示＆＃34; undefined＆＃34;。

当然，我可以简单地编写一行代码，将模型的初始值设置为空字符串，但这不是特别实用，因为在我的实际应用程序中，有许多输入，用户可能会离开任何数量的空白。

简而言之，我想知道如何制作它，以便Angular知道空白输入应该在模型中包含空字符串。

Answer 1

我会使用custom指令来扩展默认的输入指令行为。因此，如果输入具有模型，则该指令将检查此模型是否未定义，如果是，则为其指定空字符串值。

＆＃13;

<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>

＆＃13;

Answer 2

我igree与@Claies，但是，如果你需要这个特定的属性，你可以使用ng-init：

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

或创建一个特定的指令，例如＆＃39; auto-init＆＃39;或类似的，不直接在输入元素上。

如何对模型进行Angular绑定空白输入？

2 个答案: