внутри нг-повтора все состояние переключателя кнопки меняется

0

Я использовал 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 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"]
        }
    ]
}

}

Есть ли способ ограничить изменение состояния кнопки включения/выключения? Только кнопка, нажатая на эту кнопку, должна быть изменена? Я искал $ this, но не успел.

Извините за задержку забыл добавить еще одно требование, необходимо отправить ответ на url в нижнем формате. Предположим, что если опция электронной почты метода метода 1 отключена, тогда ответ должен быть отправлен как ложный и наоборот.

PUT : http://URL
  {
    "category": "Example 1",
    "method": "EMAIL",
    "enabled": false
  }

Рабочая линия Plunker

  • 0
    Интересно, если статус вкл / выкл соответствует атрибуту в settings что-то вроде settings.enabled. Кстати, состояние каждой кнопки будет независимо и идентифицироваться объектом, с которым вы повторяете, тогда вам нужно установить переключатель кнопки в соответствии с ним. не могли бы вы предоставить простые данные,
Теги:

2 ответа

0

Примечание. Если вы можете (иметь разрешение) изменить входящую структуру JSON, то у меня есть более чистый подход для этой проблемы (ниже работает решение, но может быть улучшено, если вы можете изменить структуру JSON).

Это связано с тем, что ваш $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>
Поделиться
  • 0
    Извините, я не могу изменить ответ JSON.
  • 0
    Я использовал ваш метод, он работает, спасибо, сделал некоторые изменения, ng-repeat = "settings in pgxNotification.preferences | orderBy: 'order'"
Показать ещё 1 комментарий
0

Спасибо за данные. Теперь я вижу, что этот status означает что-то на стороне сервера, как и данные, и setting.methods - это то, что вы хотите setting.methods/выключить, и это массив и в соответствии с моими предположениями, которые я сделал этот.

Примечание. Я меняю место пролета просто для удовольствия, и здесь 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="[email protected]" 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="[email protected]" 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню