默认情况下，如何将 ng-model 值设置为空字符串答案

【问题标题】：By Default, How to set ng-model value to an empty string默认情况下，如何将 ng-model 值设置为空字符串
【发布时间】：2015-12-23 18:42:06
【问题描述】：

这是我的代码：

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

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

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

这里是plnkr

更新：

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

更新 2：

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

【问题讨论】：

我猜你在控制器中拼错了myINput...应该是$scope.myInput = {}
在您的控制器中，您将myINput 设置为一个数组。在您的 HTML 中，您使用 myInput 作为对象。请修正你的拼写。它是数组还是对象？
@Moid Mohd。抱歉，是我的错。请立即查看。
@georgeawg。它可以是对象或对象数组
使用angular.forEach, docs.angularjs.org/api/ng/function/angular.forEach 将适用于数组和对象。

标签： javascript angularjs angularjs-scope angularjs-ng-model

【解决方案1】：

有两种方法。

在控制器中：

.controller('myCtrl', function($scope) {
    $scope.myINput = {
        name: '',
        age: ''
    };
});

或者在视图中

Name: <input ng-model="myInput.name" ng-init="myInput.name=''" />
age: <input ng-model="myInput.age" ng-init="myInput.age=''" />

【讨论】：

【解决方案2】：

你可以有一个指令将默认值设置为''

标记

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

指令

.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, '');
        }
      }
    }
});

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

Demo here

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

.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, '');
                        }
                    });
                }
            }
        });

【讨论】：

非常感谢这个指令。
嗨。还有一个问题。仅当模型为空时如何将模型设置为空字符串？我包括 attrs.value == undefined 但没有帮助。

【解决方案3】：

您可以使用对象字面量来初始化变量myInput。这将确保它们在加载时设置为空字符串

$scope.myInput = {
      name: '', 
      age: ''
    };

编辑：如果要初始化$scope.myInput对象中的所有值，可以使用如下JS代码：

Object.keys($scope.myInput).forEach(function(key, index) {
   $scope.myInput[key] = '';
});

或者您可以使用一些库，例如 underscore 或 lodash 来迭代 myInput 对象中的值。我假设myInput 对象中所有值的数据类型是String。如果存在其他数据类型，例如 Array，您可以将该逻辑插入 forEach() 块并相应地初始化值。

【讨论】：

plnkr.co/edit/3VAyutCtaHWVBCIwAcKJ?p=preview 。你能纠正我哪里出错了吗？
因为在您的情况下 $scope.myInput = {}; 是空的，因此没有可用的 keys。您需要使用键填充范围变量，然后将它们的值初始化为空字符串。

【解决方案4】：

您可以使用以下代码获取密钥：

var attributes = Object.keys(myInput);

for (i = 0; i < attributes.length; i++){
   myInput[attributes[i]] = '';  
}

然后循环遍历属性并将它们分配给空值，然后将它们重新分配回 myJSONObject。我假设您的对象是 JSON 对象。

【讨论】：