By Default, How to set ng-model value to an empty string

问题

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.

回答1:

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

回答2:

there are two ways to do it.

In the controller:

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

Or in the view

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

回答3:

You can use object literal to initialize your variable myInput. This will make sure they are set to empty string upon loading

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

Edit:If you want to initialize all the values in the $scope.myInput object, you can use the following JS code:

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

Or you can use some library such as the underscore or lodash to iterate the values in the myInput object. I am assuming the data type for all the values in myInput object is String. If other data types such as Array exist, you can insert that logic in the forEach() block and initialize the values accordingly.

回答4:

What you can do is use the following code to get the keys :

var attributes = Object.keys(myInput);

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

Then loop through attributes and assign them to empty values and then reassign them back to myJSONObject. I am assuming your object is a JSON object.

来源：https://stackoverflow.com/questions/34441812/by-default-how-to-set-ng-model-value-to-an-empty-string