AngularJS - Simple $scope console.log() returns undefined

问题

I'm trying to make a simple console.log() from this $scope:

<div ng-controller="CustomerController" id="customer-block">

  <h3>Customer Information</h3>

  <div class="col-md-4">
      <label>Address 1:</label>
      <input type="text" ng-model="customer.address1" class="form-content"
        id="customer-address1" />
    </div>

    <div class="col-md-4">
      <label>Address 2:</label>
      <input type="text" ng-model="customer.address2" class="form-content"
        id="customer-address2" />
    </div>

    <div class="col-md-4">
      <label>City</label>
      <input type="text" ng-model="customer.city" class="form-content"
        id="customer-city" />
    </div>

</div>

This is my javascript file:

lima3app.controller("CustomerController", function($scope){

  console.log($scope.customer);

});

But the log returns me undefined. What's wrong with that?

This is the plunkr: http://plnkr.co/edit/MU2i46o03bs22Jwh6QIe

回答1:

As the others have said, you need to initialize the customer object.

Since there is no value of customer set from controller, it is appearing as undefined in the view. When you enter values in the input boxes, this will no longer be undefined, but since logging is done only once initially, typing values in input box has no effect

Plunker Demo

Here is the part which I have changed in script.js

lima3app.controller("CustomerController", function($scope){

$scope.customer = {
  address1 : 'address1',
  address2 : 'address2',
  city:'city'
}

console.log($scope.customer);

});