Angularjs：jsonからのデータを表示するには、ng-repeat = "（key、value）in myObj"を使用してください

Question

電子メールとSMSで通知を送信する通知アプリを1つ作成しています。開始時にtrueに設定されます（カンツド変更jsonデータ）

トグルボタンを作成して、各メールのステータスとSMSを真と偽に変更します。真と偽のステータスを変更する場合、以下の形式で再びJSONデータを送信する必要があります。

PUT : http://example.url 
{ 
    "category": "Fruit", 
    "method": "EMAIL", 
    "enabled": true 
} 

HTML：

<div class="notification-inner-wrap" ng-repeat="settings in pgxNotification.preferences | orderBy:'order'" > 
    <p class="notification-heading">{{settings.code}}</p> 
    <div ng-repeat="(key, value) in pgxNotification.preferences"> 
     <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="status = !status"></i> 
       <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="status = !status"></i> 
      </div> 
      <pre>{{ status }}</pre> 
     </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="status = !status"></i> 
       <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="status = !status"></i> 
      </div> 
      <pre>{{ status }}</pre> 
     </div> 
    </div> 
</div> 

JS：ここ

app.controller('MainCtrl', function($scope) { 
    $scope.status = true; 
     $scope.changeStatus = function(status){ 
      $scope.status = !$scope.status; 
      //var method = $scope.pgxNotification.methods[index]; 

     } 


    var response = { 
     "status" : true, 
     "exception" : null, 
     "data": { 
      "methods": ["SMS","EMAIL","PUSH"], 
      "preferences": [ 
       { 
        "code": "Fruit", 
        "name": "Fruit content", 
        "methods": ["SMS", "EMAIL"] 
       }, 
       { 
        "code": "Vegetable", 
        "name": "Vegetable content", 
        "methods": ["SMS", "EMAIL"] 
       }, 
       { 
        "code": "Car", 
        "name": "Car content", 
        "methods": ["SMS", "EMAIL"] 
       }, 
       { 
        "code": "bike", 
        "name": "bike content", 
        "methods": ["SMS", "EMAIL"] 
       } 
      ] 
     } 
     }; 
    $scope.pgxNotification = response.data; 

}); 

がplunkrです：

https://plnkr.co/edit/pIBjao0ujuAzyJGZSPfU?p=preview

今、スイッチボタンが機能していないため、上記の形式でjson応答を送信する方法をオンスイッチで把握する必要があります。

どこかで私はng-repeat="(key, value) in pgxNotification.preferences"を使用してキー値を設定してからjson応答を送信する必要があります。

Answer 1

コントローラースコープレベルで変数statusを使用しています。したがって、最終的な更新は、任意のコントロールからのstatusで発生し、最終的なビュー値になります。したがって、あなたは期待される結果を得ていません。

Here is the updated plunkr