CODEWITHSUNDEEP
angularjsforms
4thSpace
4thSpace

Reputation: 44352

How to initialize form field value?

Is there a way to initialize the following form fields so the Angular code doesn't display "NaN" when the form is loaded? Having the value start at zero would be nice.

<input type="text" id="field1" value="0"/>
<input type="text" id="field2" value="0"/>
<br />

Total {{field1*50--field2}}

http://plnkr.co/edit/Cn0tCJlclIMXivli1is0?p=preview

Upvotes: 2

Views: 8617

Answers (2)

Alhuck
Alhuck

Reputation: 1029

You just add a controller to your HTML and assign a ng-model to your <input> fields and intialize it with some values in the controller instead of using value in <input>.

That's enough to have a default value for the fields

Here is the working plunker of your code,

http://embed.plnkr.co/Ssk1bP6LWq9YgAIDYaEk/preview

Hope this helps!!!!

Upvotes: 0

bamblack
bamblack

Reputation: 3779

You can use the ng-init directive. Here's the stuff copied from your plunker that works with it. But you should use this with caution, here's an excerpt from the documentation:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    testing
    <input type="text" id="field1" ng-model="field1" ng-init="field1 = 0"/>
    <input type="text" id="field2" ng-model="field2" ng-init="field2 = 0"/>
    <br />

    Total {{field1*50--field2}}
    
  </body>

</html>

So really, you should do this:

angular.module('app', [])
  .controller('testCtrl', ['$scope',
    function($scope) {

      function init() {
        $scope.field1 = 0;
        $scope.field2 = 0;
      }
      init();
    }
  ]);
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body ng-app="app">
  <div ng-controller="testCtrl">
    testing
    <input type="text" id="field1" ng-model="field1" />
    <input type="text" id="field2" ng-model="field2" />
    <br />Total {{ field1 * 50 - -field2}}
  </div>
</body>

</html>

Upvotes: 4

Related Questions