我写的代码如下
$scope.update=function(){
$timeout(function() {
$scope.$apply(function() {
$scope.fav_legs_data=JSON.parse(localStorage.getItem("hw_leg"));
$scope.fav_comm_data=JSON.parse(localStorage.getItem("hw_comm"));
$scope.fav_bill_data=JSON.parse(localStorage.getItem("hw_bill"));
});
}, 0, false);
}
当用户点击按钮时,使用ng-click="update()"
我正在做的事情是否有问题或者动态更新视图的正确方法是什么。
我还在StackOverflow question查看了这个问题并尝试使用该问题,但没有结果。
完整代码如下
app.controller('fav_ctrl',function($scope,$http,$timeout){
$scope.fav_legs_data=JSON.parse(localStorage.getItem("hw_leg"));
$scope.fav_comm_data=JSON.parse(localStorage.getItem("hw_comm"));
$scope.fav_bill_data=JSON.parse(localStorage.getItem("hw_bill"));
$scope.update=function(){
$timeout(function() {
$scope.$apply(function() {
$scope.fav_legs_data=JSON.parse(localStorage.getItem("hw_leg"));
$scope.fav_comm_data=JSON.parse(localStorage.getItem("hw_comm"));
$scope.fav_bill_data=JSON.parse(localStorage.getItem("hw_bill"));
alert("I have updated");
console.log($scope.fav_legs_data);
});
}, 0, false);
}
}
,HTML代码如下
<div id="sidebar-wrapper">
<ul class="sidebar-nav" ng-controller="fav_ctrl">
<li id="legis_menu" class="sidebar-brand">
<a href="">
<i class="fa fa-user" aria-hidden="true"></i> Legislators
</a>
</li>
<li id="bills_menu" class="sidebar-brand">
<a href="">
<i class="fa fa-sign-in" aria-hidden="true"></i> Bills
</a>
</li>
<li id="comm_menu" class="sidebar-brand">
<a href="">
<i class="fa fa-file-o" aria-hidden="true"></i> Committees
</a>
</li>
<li id="favs_menu" ng-click="update()" class="sidebar-brand">
<a href="">
<i class="fa fa-star" aria-hidden="true"></i> Favorites
</a>
</li>
</ul>
</div>
<div id="Bills_k" ng-controller="fav_ctrl" class="tab-pane fade">
<div style="margin-bottom: 0px;margin-right: 0px; margin-left: 0px;" class="row well well-sm">
<div class="col-md-6 col-sm-6 col-xs-6" style="border-collapse:separate;">
<h4>Favorite Bills</h4>
</div>
</div>
<div class="table-responsive">
<table style="border: 1px solid #ccc; border-collapse:separate; border-top: 0px; border-radius: 0px 0px 5px 5px; padding:15px; padding-top:0px;" class="table table-hover">
<tr>
<th>
</th>
<th>
Bill ID
</th>
<th>
Bill Type
</th>
<th>
Title
</th>
<th>
Chamber
</th>
<th>
Introducted on
</th>
<th>
Sponsor
</th>
<th>
</th>
</tr>
<tr ng-repeat="result in fav_bill_data">
<td>
<button id="bill_fav_button" class="fav_button" ng-click="delb(result.committee_id)">
<i class="fa fa-trash-o" aria-hidden="true" style="padding: 2px; color: #ccc; font-size: 30px; "></i></button>
</td>
<td style="text-transform: uppercase;">
{{result.bill_id}}
</td>
<td style="text-transform: uppercase;">
{{result.bill_type}}
</td>
<td>
{{result.official_title}}
</td>
<td>
{{result.chamber}}
</td>
<td>
{{result.introduced_on}}
</td>
<td>
{{result.sponsor.title}}. {{result.sponsor.last_name}}, {{result.sponsor.first_name}}
</td>
<td>
<button type="button" class="btn btn-primary" ng-click="fvdb(result.bill_id)">View Details</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
点击侧栏菜单中的收藏夹时,用户会显示ID为Bills_k的div。
PS。我正在使用bootstrap
编辑 - 我的整个网站都可以在link找到。当用户打开立法者并选择立法者并通过单击星形按钮将其添加到他的收藏夹时,此数据将存储在用户的本地存储中。当他打开收藏夹时,必须加载此数据。
您可以在控制台输入以下命令,查看数据是否保存在本地存储中。 JSON.parse(localStorage.getItem("hw_leg"))