AngularJS無法設置值textarea

Question

我試圖爲表單中的某些元素設置默認值，雖然它適用於所有輸入字段，但它似乎不適用於textarea，而代碼幾乎一樣。

HTML的形式：

<form class="form-horizontal" id="infoForm" name="form" ng-submit="ctrl.submitInfoForm(form)" novalidate> 
    <div class="form-group"> 
     <label for="inputEditName">Name</label> 
     <input type="text" class="form-control" value="{{ctrl.viewedName}}" id="inputEditName" ng-model="viewUser.name"> 
    </div> 
    <div class="form-group"> 
     <label for="inputEditLocation">Location</label> 
     <input type="text" class="form-control" value="{{ctrl.viewedLocation}}" id="inputEditLocation" ng-model="viewUser.location"> 
    </div> 
    <div class="form-group"> 
     <label for="inputEditWebsite">Website</label> 
     <input type="text" class="form-control" value="{{ctrl.viewedWebsite}}" id="inputEditWebsite" ng-model="viewUser.website"> 
    </div> 
    <div class="form-group"> 
     <label for="inputEditBio">Bio</label> 
     <textarea rows="3" class="form-control" id="inputEditBio" ng-model="viewUser.bio" >{{ctrl.viewedBio}}</textarea> 
    </div> 
    <button type="submit" class="btn btn-default">Save Changes</button> 
</form> 

ProfileController.js的相關部分：

var vm = this; 
vm.getViewedName = getViewedName; 
vm.getViewedLocation = getViewedLocation; 
vm.getViewedWebsite = getViewedWebsite; 
vm.getViewedBio = getViewedBio; 
vm.viewedName = getViewedName(); 
vm.viewedLocation = getViewedLocation(); 
vm.viewedWebsite = getViewedWebsite(); 
vm.viewedBio = getViewedBio(); 

function getViewedName() { 
    if (vm.viewedName === undefined) { 
     var viewedName; 
     var viewedUser = UserService2.getViewedUser(); 
     viewedName = viewedUser.name; 
     if (viewedName === "") { 
      viewedName = "-"; 
     } 
     return viewedName; 
    } else { 
     return vm.viewedName; 
    } 
} 

function getViewedLocation() { 
    if (vm.viewedLocation === undefined) { 
     var viewedLocation; 
     var viewedUser = UserService2.getViewedUser(); 
     viewedLocation = viewedUser.location; 
     if (viewedLocation === "") { 
      viewedLocation = "-"; 
     } 
     return viewedLocation; 
    } else { 
     return vm.viewedLocation; 
    } 
} 

function getViewedWebsite() { 
    if (vm.viewedWebsite === undefined) { 
     var viewedWebsite; 
     var viewedUser = UserService2.getViewedUser(); 
     viewedWebsite = viewedUser.website; 
     if (viewedWebsite === "") { 
      viewedWebsite = "-"; 
     } 
     return viewedWebsite; 
    } else { 
     return vm.viewedWebsite; 
    } 
} 

function getViewedBio() { 
    if (vm.viewedBio === undefined) { 
     var viewedBio; 
     var viewedUser = UserService2.getViewedUser(); 
     viewedBio = viewedUser.bio; 
     if (viewedBio === "") { 
      viewedBio = "-"; 
     } 
     return viewedBio; 
    } else { 
     return vm.viewedBio; 
    } 
} 

默認只有名字在那一刻設置，所以它看起來是這樣的：

名稱：myname 位置： - 網站： - 個人簡介：

Answer 1

從Docs：

ngModel會嘗試綁定到通過對當前範圍計算表達式給出的屬性。如果該屬性尚不存在於此範圍內，則該屬性將隱式創建並添加到範圍中。

因此，在您的案例中，angular會嘗試將Textarea綁定到viewUser.bio屬性。由於它不存在，它會用一個空值創建它，然後'覆蓋'你在html中給出的ctrl.viewedBio。

簡單的方法來解決問題：

在你的控制器（在初始化函數或者是這樣的..）

vm.viewUser.bio = vm.viewedBio 

Answer 2

我發現我做錯了什麼。

首先，我有一個ngModel和一個控制器的字段附加到textarea（也是其他輸入），所以我刪除了字段，現在我只是使用ngModel。

其次，我忘了把CTRL。在我的ngModel屬性。我通過簡單地添加ctrl來改變。到我的ngModel屬性。

所以我改變了這一切，現在的工作，它看起來像這樣：

HTML：

<form class="form-horizontal" id="infoForm" name="form" ng-submit="ctrl.submitInfoForm(form)" novalidate> 
    <div class="form-group"> 
     <label for="inputEditName">Name</label> 
     <input type="text" class="form-control" id="inputEditName" ng-model="ctrl.viewUser.name"> 
    </div> 
    <div class="form-group"> 
     <label for="inputEditLocation">Location</label> 
     <input type="text" class="form-control" id="inputEditLocation" ng-model="ctrl.viewUser.location"> 
    </div> 
    <div class="form-group"> 
     <label for="inputEditWebsite">Website</label> 
     <input type="text" class="form-control" id="inputEditWebsite" ng-model="ctrl.viewUser.website"> 
    </div> 
    <div class="form-group"> 
     <label for="inputEditBio">Bio</label> 
     <textarea rows="3" class="form-control" id="inputEditBio" ng-model="ctrl.viewUser.bio" ></textarea> 
    </div> 
    <button type="submit" class="btn btn-default">Save Changes</button> 
</form> 

ProfileController.js：

var vm = this; 
vm.getViewedUser = getViewedUser; 
vm.viewUser = getViewedUser(); 


function getViewedUser() { 
    if (vm.viewUser === undefined) { 
     vm.viewUser = UserService2.getViewedUser(); 
     if (vm.viewUser.name === "") { 
      vm.viewUser.name = "-"; 
     } 
     if (vm.viewUser.location === "") { 
      vm.viewUser.location = "-"; 
     } 
     if (vm.viewUser.website === "") { 
      vm.viewUser.website = "-"; 
     } 
     if (vm.viewUser.bio === "") { 
      vm.viewUser.bio = "-"; 
     } 
     return vm.viewUser; 
    } else { 
     return vm.viewUser; 
    } 
} 

雖然Founded1898的答案， Vinod Louis的評論幫助，我覺得這些沒有完全回答我的問題，這就是我添加此答案的原因。