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

时间:2015-09-28 14:02:01

标签: javascript jquery angularjs

在我的角度应用中,我正在使用ng-bindmodal上显示一些静态信息。这是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中,在最后一个.row上正常工作,但它在我之前的input元素中没有输出任何内容。

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

有没有办法让单向数据绑定与inputs一起工作?

2 个答案:

答案 0 :(得分:3)

ng-bind用于HTML标记的内容,而不是属性。请使用双卷曲标记,如下所示:

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

答案 1 :(得分:1)

解决还原的方法是不更新实时模型并制作要编辑的对象的副本。

当用户准备保存时,只需使用副本扩展原件。

$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的{​​{1}},原始内容将保持不变,直到您保存更改

edititem