如何解决AngularJs:输入值也使用ng-model在显示中更改我也尝试过ng-value和ng-bind
<div class="form-group">
Name <input type="text" class="form-control" placeholder="item" ng-model="shoppingItem.itemName" required>
</div>
<div class="form-group">
Image URL <input type="url" class="form-control" placeholder="item" ng-model="shoppingItem.imgUrl" required>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" ng-click="save()" >Success</button>
</div>
app.controller('recipebookController',function($scope,$routeParams,RecipeService,$location){
$scope.shoppingItems =RecipeService.shoppingItems;
$scope.rp="Route parameter value"+RecipeService.shoppingItems[0].itemName;
$scope.save = function(){
RecipeService.save($scope.shoppingItem);
$location.path("/");
}
});
<div class="col-xs-12">
<ul class="list-group">
<li ng-repeat="item in shoppingItems"class="list-group-item text-center clearfix">
<span style="font-weight:bold">{{item.itemName}}</span>
<img ng-src="{{ item.imgUrl }}" width="40" height="40"/>`
</li>
</ul>
</div>
当我输入save时,新数据将完美地按行保存并显示,但是当我将新值重新输入到输入中时。键入时,以前保存的值会发生更改。
解决方法
您面临的问题是,调用RecipeService.save($scope.shoppingItem);
时,RecipeService将引用保存到您的范围变量中。
因此,我可以尝试执行以下操作,而不是直接分配变量:
RecipeService.save(angular.copy($scope.shoppingItem));
这将创建$scope.shoppingItem
所引用对象的新副本,并使您可以编辑其中一个对象而不会影响另一个。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。