默认情况下，如何将 ng-model 值设置为空字符串 [英] By Default, How to set ng-model value to an empty string

问题描述

这是我的代码:

 
名称:<input ng-model="myInput.name"/>年龄:<input ng-model="myInput.age"/><预>{{我的输入 |json}}

<script type="text/javascript">angular.module('myApp', []).controller('myCtrl', function($scope) {$scope.myInput = {};});

默认情况下，未将空字符串设置为 ng-model.

默认情况下，如何将所有的 myInput 值设置为 "" ?

这是 plnkr

更新:

假设有超过 100 个 myInput 字段.我必须手动将其设置为 ' ' 吗?

更新 2:

Pankaj Parkar 指令运行良好.但是当然，它将所有模型值设置为 ' ' .仅当模型为空时如何将模型设置为空字符串?我检查了 attrs.value == undefined 但没有任何帮助.

解决方案

您可以有一个指令来负责将默认值设置为 ''

标记

input empty-input ng-model="myInput.name"/><br><br>年龄:<input empty-input ng-model="myInput.age"/>

指令

.directive('emptyInput', function($parse) {返回 {要求:'?ngModel',链接:函数(范围、元素、属性、ngModel){//ngModel 应该在那里 &它应该是文本类型if (angular.isObject(ngModel) &&(!attrs.type || attrs.type === 'text')) {var 模型 = $parse(attrs.ngModel);模型分配(范围，'')；}}}});

您可以循环遍历对象并将每个属性设置为 '' 的其他内容.但这有局限性，即对于某些属性，您不想将值更改为 ''.那么指令方式会比在循环中添加条件更可取.

此处演示

仅当模型为空时才将模型设置为空字符串

.directive('emptyInput', function ($parse) {返回 {要求:'?ngModel',链接:函数(范围、元素、属性、ngModel){var ngModelGet = $parse(attrs.ngModel);scope.$watch(attrs.ngModel, function () {if (ngModelGet(scope) == undefined && angular.isObject(ngModel) && (!attrs.type || attrs.type === 'text')) {var 模型 = $parse(attrs.ngModel);模型分配(范围，'')；}});}}});

Here is my code :

 <div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="myInput.name" />
    age: <input ng-model="myInput.age" />

    <pre>
      {{myInput | json}}
    </pre>
  </div>

  <script type="text/javascript">
    angular.module('myApp', [])
      .controller('myCtrl', function($scope) {
        $scope.myInput = {};
      });
  </script>

By Default, Empty string is not set to ng-model.

By Default, How to set all of the myInput value to "" ?

Here is the plnkr

Update:

Assume There are more than 100 myInput field. Shall I have to manually set it to ' ' ?

Update 2:

Pankaj Parkar directive works well. But Of Course, It set all model value to ' ' . How to set model to empty string only if the model is empty ? I checked attrs.value == undefined but nothing helps.

解决方案

You could have a directive which will take care of setting a default value to ''

Markup

input empty-input ng-model="myInput.name" /> <br> <br>
age: <input empty-input ng-model="myInput.age" />

Directive

.directive('emptyInput', function($parse) {
    return {
      require: '?ngModel',
      link: function(scope, element, attrs, ngModel) {
        //ngModel should be there & it should be of type text
        if (angular.isObject(ngModel) &&
          (!attrs.type || attrs.type === 'text')) {
          var model = $parse(attrs.ngModel);
          model.assign(scope, '');
        }
      }
    }
});

Other thing you could loop through object and make each property to ''. But that has limitation which is, for some property you don't wanted to change the value to ''. Then the directive way would be preferable rather than adding condition inside your loop.

Demo here

Set Model to empty string only if model is empty

.directive('emptyInput', function ($parse) {
            return {
                require: '?ngModel',
                link: function (scope, element, attrs, ngModel) {
                    var ngModelGet = $parse(attrs.ngModel);
                    scope.$watch(attrs.ngModel, function () {
                        if (ngModelGet(scope) == undefined && angular.isObject(ngModel) && (!attrs.type || attrs.type === 'text')) {
                            var model = $parse(attrs.ngModel);
                            model.assign(scope, '');
                        }
                    });
                }
            }
        });

这篇关于默认情况下，如何将 ng-model 值设置为空字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！