AngularJS 无法设置值 textarea

Posted 2023-05-07

【中文标题】AngularJS 无法设置值 textarea

【英文标题】：AngularJS can't set value textarea

【发布时间】：2017-09-05 11:24:12

【问题描述】：

我正在尝试为表单中的某些元素设置默认值，虽然它适用于所有输入字段，但它似乎不适用于 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;
    

默认情况下只设置名称，所以此时它看起来像这样：

姓名：我的名字 地点： - 网站： - 简介：

【问题讨论】：

你为什么要使用 value 和 ng-model 两个 ng-model 都会自动绑定 value 从所有元素中删除 value 属性，对于文本区域只需保留它

控制器中没有任何内容与 textarea 的 ng-model 匹配，也没有 ctrl 前缀。创建一个显示问题的演示

【参考方案1】：

来自Docs：

ngModel 将尝试绑定到通过评估当前作用域上的表达式给出的属性。如果该属性在此范围内尚不存在，它将被隐式创建并添加到该范围内。

因此，在您的情况下，angular 试图将 Textarea 绑定到 viewUser.bio 属性。由于它不存在，它将使用空值创建它，然后“覆盖”您在 html 中提供的ctrl.viewedBio。

解决问题的简单方法：

在您的控制器中（在 Init 函数或类似的东西中......）

vm.viewUser.bio = vm.viewedBio

【参考方案2】：

我发现我做错了什么。

首先我有一个 ngModel 和一个控制器的字段附加到文本区域（以及其他输入），所以我删除了该字段，现在我只使用 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 的评论有所帮助，但我觉得那些并没有完全回答我的问题，这就是我添加这个答案的原因。