Utilizing ng-repeat, I have implemented a feature to display multiple content with on/off buttons. However, when toggling the off button for a specific content, all button states are being changed instead of just the selected one.
<div ng-repeat="settings in Notification.preferences | orderBy:'order'">
<p class="notification-heading">{{settings.code}}</p>
<div class="notification-methods">
<span>{{settings.methods[0]}}</span>
<div class="notification-on-off-icon">
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus()"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus()"></i>
</div>
</div>
<div class="notification-methods">
<span>{{settings.methods[1]}}</span>
<div class="notification-on-off-icon">
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus()"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus()"></i>
</div>
</div>
</div>
Controller:
angular.module(notification_settings_app_name)
.controller("notificationSettingsCtrl", ["$scope", '$rootScope', 'notificationSettingsService', function($scope, $rootScope, notificationSettingsService) {
$scope.status = true;
$scope.changeStatus = function(){
$scope.status = !$scope.status;
}
notificationSettingsService.NotificationGetContent().then(function(response){ debugger;
$scope.Notification = response;
});
}]);
JSON Data:
{
"status" : true,
"exception" : null,
"data": {
"methods": ["SMS","EMAIL","PUSH"],
"preferences": [
{
"code": "Example 1",
"name": "Example 1 content",
"methods": ["SMS", "EMAIL"]
},
{
"code": "Example 2",
"name": "Example 2 content",
"methods": ["SMS", "EMAIL"]
},
{
"code": "Example 3",
"name": "Example 3 content",
"methods": ["SMS", "EMAIL"]
},
{
"code": "Example 4",
"name": "Example 4 content",
"methods": ["SMS", "EMAIL"]
}
]
}
}
Can anyone suggest a method to prevent all on/off buttons from changing state simultaneously? The desired behavior is for only the clicked button's state to change. Is there a way to achieve this using AngularJS?
Apologies for the delay; I forgot to mention an additional requirement. It is necessary to send a response to a URL in the following format: If, for example, the email option for Example 1 is toggled off, the response should be sent as false and vice versa.
PUT : http://URL
{
"category": "Example 1",
"method": "EMAIL",
"enabled": false
}