我的功能非常简单,我必须想象很常见。我有一个页面列出了一组年龄组',并提供了添加“年龄组”的功能。我只是希望在一个新的年龄组'已添加。
在早期版本中,我只是在我的服务中使用$ rootScope来放置所有年龄组'在$ http请求完成时在$ rootScope中。在这个最新的重构中,我在我的应用程序中删除了$ rootScope的所有使用,并且它变得有问题。
HTML视图的代码如下: [注意:所有被视为无关的代码已从所有代码段中删除]
<div id="tabContent" class="tab-pane fade in active" ng-show="subIsSelected(1)">
<div class="row">
<div class="col-xs-12">
<form class="form-inline">
<button type="button" class="btn btn-success" ng-click="openAddAgeGroup()">Add Age Group</button>
</form>
</div>
</div>
<hr />
<div class="row row-content">
<div class="col-xs-12">
<h4 ng-show="!areAgeGroups()">No current age groups.</h4>
<ul class="media-list" ng-show="areAgeGroups()">
<li class="media" ng-repeat="ageGroup in ageGroups" style="padding:10px; background: lightGray;">
<div class="media-left media-top" >
<img class="media-object img-thumbnail" style="width: 75px;" ng-src="./images/trfc.png" alt="club logo">
</div>
<div class="media-body">
<h3 class="media-heading" style="padding-top: 20px;">{{ageGroup.name}}</h3>
<button type="button" class="btn btn-xs btn-primary" style="width: 50px;" ng-click="openEditAgeGroup(ageGroup)">Edit</button>
<button type="button" class="btn btn-xs btn-danger" style="width: 50px;" ng-click="deleteAgeGroup(ageGroup)">Delete</button>
</div>
</li>
</ul>
</div>
</div>
</div>
首次加载时,该页面会正确显示所有年龄组&#39;在$ scope.ageGroups数组中。
点击按钮添加&#39;年龄组&#39;,按如下方式创建ng对话框:
$scope.openAddAgeGroup = function() {
console.log("\n\nOpening dialog to add age group");
ngDialog.open({ template: 'views/addAgeGroup.html', scope: $scope, className: 'ngdialog-theme-default', controller:"HomeController" });
};
并且该对话框填充如下:
<div class="ngdialog-message">
<div class="">
<h3>Add a New Age Group</h3>
</div>
<div> </div>
<div>
<form ng-submit="addAgeGroup()">
<div class="form-group">
<label class="sr-only" for="name">Age Group Display Name</label>
<input type="text" class="form-control" id="name" placeholder="age group name" ng-model="ageGroupForm.name">
</div>
<div class="form-group">
<label class="sr-only" for="birthyear">Birth Year</label>
<input type="text" class="form-control" id="birthyear" placeholder="birth year" ng-model="ageGroupForm.birthyear">
</div>
<div class="form-group">
<label class="sr-only" for="socceryear">Soccer Year</label>
<div class="input-group">
<div class="input-group-addon">U</div>
<input type="text" class="form-control" id="socceryear" placeholder="soccer year" ng-model="ageGroupForm.socceryear">
</div>
</div>
<button type="submit" class="btn btn-info">Add</button>
<button type="button" class="btn btn-default" ng-click=closeThisDialog("Cancel")>Cancel</button>
</form>
</div>
</div>
提交表单后,&#39;年龄组&#39;从控制器添加到数据库:
'use strict';
angular.module('ma-app')
.controller('HomeController', ['$scope', 'ngDialog', '$state', 'authService', 'coreDataService', 'userService', '$rootScope', 'clubService', 'schedulingService', function($scope, ngDialog, $state, authService, coreDataService, userService, $rootScope, clubService, schedulingService) {
...
$scope.addAgeGroup = function() {
coreDataService.addAgeGroup($scope.ageGroupForm)
.then(function(response) {
coreDataService.refreshAgeGroups()
.then(function(response) {
coreDataService.setAgeGroups(response.data);
$scope.ageGroups = coreDataService.getAgeGroups();
console.log("\n\n\nretrieved age groups and put them in scope");
console.log($scope.ageGroups);
ngDialog.close();
});
}, function(errResponse) {
console.log("Failed on attempt to add age group:");
console.log(errResponse);
});
};
coreDataService定义如下:
'use strict';
angular.module('ma-app')
.service('coreDataService', ['$http', 'baseURL', 'googleGeolocateBaseURL', 'googleGeocodeKey', 'googleMapsBaseURL', function($http, baseURL, googleGeolocateBaseURL, googleGeocodeKey, googleMapsBaseURL) {
var ageGroups = {};
var ageGroupsLoaded = false;
this.getAgeGroups = function() {
return ageGroups;
};
this.setAgeGroups = function(newAgeGroups) {
ageGroups = newAgeGroups;
ageGroupsLoaded = true;
};
this.addAgeGroup = function(formData) {
//post age group:
var postString = '{ "birth_year": "' + formData.birthyear + '", "soccer_year": "U' + formData.socceryear + '", "name": "' + formData.name + '" }';
console.log("Posting age group with string: " + postString);
return $http({
url: baseURL + 'age_groups/',
method: 'POST',
headers: {
'content-type': 'application/json'
},
data: postString
});
};
}]);
所以,当一个年龄组&#39;添加,控制台日志记录表明新的&#39;年龄组&#39;现在存储在$ scope.ageGroups数组中的集合中,但HTML的重复次数并未反映新的&#39;年龄组&#39;。仅当我导航到界面中的另一个选项卡,然后返回到包含&#39;年龄组的选项卡时。是新增加的&#39;年龄组&#39;显示。
答案 0 :(得分:0)
更新: 更新您的值后,您需要告诉angular它已更新。如果你将代码包装在$ timeout中。在下一个摘要周期中,视图将更新。有关详细信息,请参阅here。
...
$timeout(function() {
$scope.ageGroups = coreDataService.getAgeGroups();
// anything you want can go here and will safely be run on the next digest.
})
...
$ timeout基本上在下一个$ digest周期运行,从而在视图中更新你的值。
答案 1 :(得分:0)
我建议将from bs4 import BeautifulSoup
xml_text = open('US_2171_ProductPricing_20170206233707.xml').read()
soup = BeautifulSoup(xml_text, 'html.parser')
products = soup.findAll('product')
data = [(p['productcode'],
p['statuscode'],
p.findAll('pricing')[0]['catalogprice'])
for p in products]
for items in data:
print(', '.join(items))
部分包装在ng-repeat
中,在add方法上触发事件并从指令中听取它:
directive
在指令链接功能中:
this.addAgeGroup = function(formData) {
// do stuff
$scope.$broadcast('itemadded');
}
答案 2 :(得分:0)
我建议使用ControllerAs语法,如果绑定到的数组得到更新,它将刷新ng-repeat。
请参阅此处给出的答案 - ng-repeat not updating on update of array