AngularJS 无法设置值文本区域

Question

我正在尝试为表单中的某些元素设置默认值，虽然它适用于所有输入字段，但它似乎不适用于文本区域，而代码几乎相同。

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;
    }
}

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

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

Answer 1

来自Docs：

ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

因此，在您的案例中，angular 试图将 Textarea 绑定到 viewUser.bio 属性。由于它不存在，它将创建一个空值，然后 'overwrites' 您在 html 中提供的 ctrl.viewedBio。

解决问题的简单方法：

在您的 Controller 中（在 Init 函数中或类似的东西中..）

vm.viewUser.bio = vm.viewedBio

Answer 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 and the comment of Vinod Louis 的回答有帮助，但我觉得这些并没有完全回答我的问题，这就是我添加这个答案的原因。

AngularJS 无法设置值文本区域

AngularJS can't set value textarea

html

javascript

textarea

angularjs