この$ scopeから簡単なconsole.log()
を作成しようとしています:
<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>
これは私のJavaScriptファイルです:
lima3app.controller("CustomerController", function($scope){
console.log($scope.customer);
});
しかし、ログは私undefinedを返します。それのどこが悪いんだい?
これはplunkrです: http://plnkr.co/edit/MU2i46o03bs22Jwh6QIe
他の人が言ったように、顧客オブジェクトを初期化する必要があります。
コントローラーから設定された顧客の値がないため、ビューでは未定義として表示されます。入力ボックスに値を入力すると、これは未定義ではなくなりますが、ロギングは最初に1回しか行われないため、入力ボックスに値を入力しても効果はありません。
Script.jsで変更した部分を次に示します。
lima3app.controller("CustomerController", function($scope){
$scope.customer = {
address1 : 'address1',
address2 : 'address2',
city:'city'
}
console.log($scope.customer);
});
あなたのJSコード
console.log($scope.customer);
customerControllerコントローラーを初期化するときに実行します。そのとき、$ scope.customerには値がなく、未定義を返します。