在我的角度应用中,我正在使用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
中,在最后一个.row上正常工作,但它在我之前的input
元素中没有输出任何内容。
我不想使用ng-model
因为我不想在这个模式中使用双向数据绑定。如果用户按下取消,我需要能够还原任何更改,如果我使用ng-model
,则无法恢复。
有没有办法让单向数据绑定与inputs
一起工作?
答案 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