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的评论帮助，我觉得这些没有完全回答我的问题，这就是我添加此答案的原因。