我使用ng-repeat来显示多个内容，并为内容创建了开/关按钮。
当我选择关闭时，只有该特定按钮应该关闭，而不是这一切，所有按钮的状态都在改变。
<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>
控制器：
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数据：
{
"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"]
}
]
}
}
有没有办法限制所有开/关按钮状态变化？只应点击按钮状态的按钮？ 我一直在寻找$ this但没有成功。
抱歉延迟忘了添加一个要求，还需要以下面的格式发送回复给url。假设示例1方法电子邮件选项被关闭，则响应应该作为false发送，反之亦然。
PUT : http://URL
{
"category": "Example 1",
"method": "EMAIL",
"enabled": false
}
答案 0 :(得分：0)
感谢您提供数据，现在我可以看到，我相信status在服务器端就像找到了数据一样，并且setting.methods就是您要打开/关闭的内容是数组，根据我的假设，我做了这个。
注意：我只是为了好玩而更改了范围，here plnkr
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.status = true;
$scope.changeStatus = function(settings){
$scope.status = !$scope.status;
};
$scope.addMethod = function(setting, method){
setting.methods.push(method);
}
$scope.removeMethod = function(setting, method){
var index = setting.methods.indexOf(method);
setting.methods.splice(index,1);
}
var response = {
"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"]
}
]
}
};
$scope.Notification = response.data;
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script data-require="jquery@1.10.0" data-semver="1.10.0" src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div ng-repeat="settings in Notification.preferences | orderBy:'order'">
<p class="notification-heading">{{settings.code}}</p>
<div ng-repeat='method in Notification.methods track by $index' class="notification-methods">
<div class="notification-on-off-icon">
<span>{{method}}</span>
<i class="fa fa-toggle-on active" ng-if="settings.methods.indexOf(method) != -1" ng-click="removeMethod(settings, method)"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="settings.methods.indexOf(method) == -1" ng-click="addMethod(settings, method)"></i>
</div>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
这是因为您的$scope.status对所有人而言都很常见，不适合个人偏好。考虑这个例子：
var app = angular.module("sa", []);
app.controller("FooController", function($scope) {
$scope.changeStatus = function(settings, method) {
settings[method] = !settings[method];
};
$scope.isActive = function(settings, method) {
return settings[method];
};
$scope.Notification = {
"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"]
}]
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<div ng-app="sa" ng-controller="FooController" class="container">
<div class="panel panel-default" ng-repeat="settings in Notification.data.preferences | orderBy:'order'">
<p class="notification-heading panel-heading">{{settings.code}}</p>
<div class="notification-methods panel-body">
<span>{{settings.methods[0]}}</span>
<span class="notification-on-off-icon">
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-class="{'fa-toggle-on active': !isActive(settings, settings.methods[0]), 'fa-toggle-off inactive': isActive(settings, settings.methods[0])}" ng-click="changeStatus(settings, settings.methods[0])"></i>
</span>
</div>
<div class="notification-methods panel-body">
<span>{{settings.methods[1]}}</span>
<span class="notification-on-off-icon">
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-class="{'fa-toggle-on active': !isActive(settings, settings.methods[1]), 'fa-toggle-off inactive': isActive(settings, settings.methods[1])}" ng-click="changeStatus(settings, settings.methods[1])"></i>
</span>
</div>
</div>
</div>