我有这种情况，我有一个单选按钮，用于打开一个名为订阅的部分。单击该部分打开时，使用其他2个单选按钮，每周和每月。每周单选按钮是预选的，当我按下打开该部分的第一个收音机并保存时，应该保存。我需要在这里实现的是，用户可以将订阅更改为每月，并且保存后也应该保留此状态。 因此，当用户后退或刷新页面时，部分订阅将保持打开并显示所选时间段。我想知道在我的观点中我必须做的mofiication和ctrl达到上面提到的目标。
观点：
<!--||| Subscribe Start |||-->
<div class="main-edit">
<div class="subsection">
<div class="flex-container row">
<div class="radiobutton-group">
<div class="width-140">
<input id="subscribed" type="checkbox" ng-model="analyticsEmailSettings.subscribed" value="subscribed" class="radiobutton" ng-click="modifySubscriptionType(type)">
<label class="label highlight inline no-bottom-margin" for="subscribed">
{{ 'user_settings_emailStatistics_subscribe' | translate }}
</label>
</div>
</div>
</div>
<div ng-show="analyticsEmailSettings.subscribed > 0">
<div class="flex-container row" ng-show="getUnselectedEngines().length > 0">
<div class="input-group flex-1" ng-switch="analyticsEmailSettings.subscription">
<label class="label" for="name">{{ 'user_settings_emailStatistics_recurrence' | translate }}</label>
<div class="inputs-container-row half-width" name="oftenReportSent">
<span class="radiobutton flex-1" ng-class="{'checked' : analyticsEmailSettings.subscription === 'WeeklyAnalytics'}" name="radio">
<input type="radio" name="WeeklyAnalytics"
ng-model="analyticsEmailSettings.subscription"
ng-checked="analyticsEmailSettings.subscription === 'WeeklyAnalytics'"
value="WeeklyAnalytics"
id="WeeklyAnalytics"
ng-required="">
<label for="WeeklyAnalytics">{{ 'user_settings_emailStatistics_weekly' | translate }}</label>
</span>
<span class="radiobutton flex-1" ng-class="{'checked' : analyticsEmailSettings.subscription === 'MonthlyAnalytics'}">
<input type="radio" name="MonthlyAnalytics"
ng-model="analyticsEmailSettings.subscription"
ng-checked="analyticsEmailSettings.subscription === 'MonthlyAnalytics'"
value="MonthlyAnalytics"
id="MonthlyAnalytics"
ng-required="">
<label for="MonthlyAnalytics">{{ 'user_settings_emailStatistics_monthly' | translate }}</label>
</span>
</div>
<!--<div> <span style="color:red;" ng-show="analyticsEmailSettings.subscription == null">Please select option</span></div>-->
</div>
</div>
CTRL：
searchApp.controller('UserSettingsCtrl', ['$scope', '$q', '$rootScope', 'aiStorage', 'userConfig', 'UserSettingsService', 'WebsiteSource', 'AnalyticsEmailService', 'toaster', '$translate', '$timeout', 'ngTableParams',
function($scope, $q, $rootScope, store, userConfig, UserSettingsService, WebsiteSource, AnalyticsEmailService, toaster, $translate, $timeout, ngTableParams) {
$scope.init = function() {
$scope.availableLanguages = {
da: 'Dansk',
en: 'English',
sv: 'Svensk'
}
$scope.userInfo = store.get('user')
$scope.loadingAction = false
$scope.selectFlag = false
$scope.subscriptionEnginesFromServer = []
$scope.subscriptionEngines = []
$scope.analyticsEmailSettings = {}
$scope.analyticsEmailSettings.subscription = 'WeeklyAnalytics'
$scope.engines = angular.copy(WebsiteSource.sites)
AnalyticsEmailService.getUserSubscription().then(
function success(response) {
$scope.loadingAction = false
$scope.subscription = response
console.log('response.data', response.data)
$scope.subscriptionEnginesFromServer = populateSubscribedEnginesFromServer(response.data)
$scope.analyticsEmailSettings.subscribed = (response.data.length > 0)
},
function error() {})
}
function populateSubscribedEnginesFromServer(data) {
var subscriptionEngines = []
for (var i = 0; i < data.length; i++) {
var subscription = data[i]
var engine = $scope.engines.filter(function(x) {
return x.id === subscription.engine
})[0]
console.log('engine', engine)
if (engine) subscription.name = engine.name
subscriptionEngines.push(subscription)
}
console.log('subscriptionEngines', subscriptionEngines)
return subscriptionEngines
}
$scope.save = function() {
$scope.loadingAction = true
if ($scope.analyticsEmailSettings.subscribed) {
for (var i = 0; i < $scope.subscriptionEngines.length; i++) {
var obj = {
'type': $scope.subscriptionEngines[i].type,
'engine': $scope.subscriptionEngines[i].id || $scope.subscriptionEngines[i].engine,
'title': $scope.subscriptionEngines[i].name,
'name': $scope.subscriptionEngines[i].name
}
$scope.subscriptionEnginesFromServer.push(obj)
}
AnalyticsEmailService.updatesubscriptions($scope.subscriptionEnginesFromServer, function success(response) {}, function error() {})
$timeout(function() {
AnalyticsEmailService.getUserSubscription().then(
function success(response) {
$scope.loadingAction = false
$scope.subscription = response
$scope.analyticsEmailSettings.subscribed = (response.data.length > 0)
},
function error() {})
}, 1000)
} else {
AnalyticsEmailService.unsubscribe($scope.analyticsEmailSettings.subscription, function success(response) {}, function error() {})
}
UserSettingsService.save({
userId: $scope.userInfo.id
}, $scope.userInfo, function() {
$scope.loadingAction = false
userConfig.setCurrentUserConfig($scope.userInfo)
userConfig.setUserLocale()
store.set('user', $scope.userInfo)
toaster.pop({
type: 'success',
body: $translate.instant('notifications_user_settings_changed_success')
})
}, function() {})
$scope.subscriptionEngines = []
}
// removeSelectedEngines
$scope.getUnselectedEngines = function() {
if (!$scope.engines)
return []
var unselectedEngines = []
for (var i = 0; i < $scope.engines.length; i++) {
if ($scope.subscriptionEnginesFromServer.filter(function(x) {
return x.engine === $scope.engines[i].id
}).length == 0)
unselectedEngines.push($scope.engines[i])
}
// All engines
return unselectedEngines
}
$scope.addEngineToSubscriptionServer = function(engine) {
if ($scope.analyticsEmailSettings.subscription) {
engine.type = $scope.analyticsEmailSettings.subscription;
$scope.subscriptionEngines.push(engine);
$scope.save();
if ($scope.engine !== undefined)
$scope.engine.current = $scope.getUnselectedEngines()[0];
$scope.showMessage = true;
$scope.successMessage = "Subscription saved successfully!!!"
$timeout(function() {
$scope.showMessage = false;
}, 2000);
} else {
$scope.selectFlag = true
}
}
$scope.removeEngineFromSubscriptionServer = function(engine) {
var index = $scope.subscriptionEnginesFromServer.indexOf(engine)
$scope.subscriptionEnginesFromServer.splice(index, 1)
if ($scope.engine !== undefined)
$scope.engine.current = $scope.getUnselectedEngines()[0]
$scope.save()
}
$scope.modifySubscriptionType = function(engine) {
if ($scope.type == 'WeeklyAnalytics')
return $scope.analyticsEmailSettings.subscription = 'WeeklyAnalytics'
return $scope.analyticsEmailSettings.subscription
$scope.save()
}
// $scope.modifySubscriptions = function(engine, type, functionality) {
// var index = $scope.engines.indexOf(engine)
// $scope.engines[index].type = type
// if (functionality == 'add') {
// $scope.subscriptionEngines = []
// engine.type = 'WeeklyAnalytics'
// $scope.subscriptionEngines.push(engine)
// } else {
// for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) {
// if ($scope.subscriptionEnginesFromServer[i].engine == engine.id) {
// if (functionality == 'update')
// $scope.subscriptionEnginesFromServer[i].type = type
// else if (functionality == 'remove') {
// $scope.subscriptionEnginesFromServer.splice(i, 1)
// }
// break
// }
// }
// }
// $scope.save()
// }
}
])
