不能從$ scope.account.name設置未定義的屬性「名稱」

Question

我正在做一個小例子來提交一個帶有用戶名和電子郵件的表單。

我想將默認值設置爲輸入，就像這樣：

let app = angular.module('myApp', []); 
 

 
app.controller('myController', function ($scope) { 
 
    let account = {}; 
 
    
 
    // TypeError: Cannot set property 'name' of undefined 
 
    $scope.account.name = 'Hermione'; 
 

 
    // TypeError: Cannot set property 'email' of undefined 
 
    $scope.account.email = 'hermione@gmail.com'; 
 
    
 
    $scope.form_submit = function ($event, account) { 
 
    $event.preventDefault(); 
 
    
 
    console.log('name', account['name']); 
 
    console.log('email', account['email']); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<form ng-app="myApp" ng-controller="myController"> 
 
    <div> 
 
    <label>Name:</label> 
 
    <input type="text" ng-model="account.name" /> 
 
    </div> 
 
    
 
    <div> 
 
    <label>Email:</label> 
 
    <input type="email" ng-model="account.email" /> 
 
    </div> 
 
    
 
    <div> 
 
    <a href="javascript:;" ng-click="form_submit($event, account)">Submit</a> 
 
    </div> 
 
</form>

錯誤消息：

TypeError: Cannot set property 'name' of undefined

或

TypeError: Cannot set property 'email' of undefined

我的第一個問題：我該如何解決它？

我也試過：用ng-model="name"代替ng-model="account.name"。然後，$scope.name = 'Hermione'。它工作正常。對不起，但我不想用這種方式。

第二種情況：我想通過使用ViewData來設置默認值。我已經試過：

@{ 
    // I've set a breakpoint to check value before, ViewData["Name"] is not null 
    string name = ViewData["Name"]?.ToString() ?? string.empty; 
} 

然後：

<input type="text" ng-model="account.name" value="@name" /> 

該輸入始終是空白。

所以，我的第二個問題是：怎麼了？

p/s：我提到的問題：Cannot set property 'x' of undefined in AngularJs [duplicate]。但它似乎不是我的問題。我在那裏找不到答案。

Answer 1

在控制器代碼，定義新的對象account在$範圍如下：

.... 
    // change let account = {}; to the following: 
    $scope.account = {}; 

    // now you could set $scope.acount.name 
    $scope.account.name = 'Hermione'; 
    ... 

Answer 2

let app = angular.module('myApp', []); 
 

 
app.controller('myController', function ($scope) { 
 
    var account = {}; 
 
    
 
    // TypeError: Cannot set property 'name' of undefined 
 
    account.name = 'Hermione'; 
 

 
    // TypeError: Cannot set property 'email' of undefined 
 
    account.email = 'hermione@gmail.com'; 
 
    $scope.account=account; 
 
    
 
    $scope.form_submit = function ($event, account) { 
 
    $event.preventDefault(); 
 
    
 
    console.log('name', account['name']); 
 
    console.log('email', account['email']); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<form ng-app="myApp" ng-controller="myController"> 
 
    <div> 
 
    <label>Name:</label> 
 
    <input type="text" ng-model="account.name" /> 
 
    </div> 
 
    
 
    <div> 
 
    <label>Email:</label> 
 
    <input type="email" ng-model="account.email" /> 
 
    </div> 
 
    
 
    <div> 
 
    <a href="javascript:;" ng-click="form_submit($event, account)">Submit</a> 
 
    </div> 
 
</form>