Angular的ng-bind在我的<input type="text">中不起作用

Angular ng-bind doesn't work in my <input type="text">

本文关键字：quot text 不起作用 type input 我的 Angular ng-bind      更新时间：2023-09-26

在我的angular应用程序中，我使用ng-bind在modal上显示一些静态信息。这是HTML:

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label for="orgTelephone" lang-tag="ActivityReport.NewContact_Modal_Telephone" class="sr-only">Telephone</label>
            <input type="text" class="form-control" id="orgTelephone" ng-bind="contact.telephone" placeholder="Placeholder / Hint Texts">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="orgEmail" lang-tag="ActivityReport.NewContact_Modal_Email" class="sr-only">Email</label>
            <input type="text" class="form-control" id="orgEmail" ng-bind="contact.email" placeholder="Placeholder / Hint Texts">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <label for="orgSuggestedFollowup" lang-tag="ActivityReport.NewContact_Modal_Followup" class="sr-only">Follow up</label>
        <textarea class="form-control" rows="5" id="orgSuggestedFollowup" ng-bind="contact.followup" placeholder=""></textarea>
    </div>
</div>

问题是，ng-bind确实在我的textarea中正确工作，在最后一行，但它在我以前的input元素中没有输出任何东西。

我不想使用ng-model，因为我不想在这个模式中进行双向数据绑定。我需要能够恢复任何更改，如果用户按下取消，我不能如果我使用ng-model。

是否有办法使单向数据绑定工作与inputs ?

ng-bind用于HTML标记的内容，而不是属性。使用双花括号代替，像这样:

<input type="text" class="form-control" id="orgTelephone" value="{{contact.telephone}}" placeholder="Placeholder / Hint Texts">

解决还原的方法是不更新活动模型，而是复制要编辑的对象。

当用户准备保存时，只需用副本扩展原始文件。

$scope.item={foo:'bar'};
// make standalone copy that is not a reference to original
$scope.editItem = angular.copy($scope.item);
$scope.save = function(){
  // update server and then update local data using extend
  angular.extend($scope.item, $scope.editItem);
}

然后使用ng-model指向edititem，原始的将保持不变，直到您保存更改

<input ng-model="editItem.foo">
相关文章：