Angularjs: Use ng-repeat=“(key, value) in myObj” to show data from json

Question

I am creating one notification app which will send notification through email and SMS. Which will be set to true at starting (cant change json data)

I have created toggle button which will change status of each email and sms to true and false. when changing status to true and false, need to send json data again in below format:

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;

});

Here is the plunkr:

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

Right now the switch button is not working, and need to figure out on-switch how to send json response in above format.

somewhere I read that need to use ng-repeat="(key, value) in pgxNotification.preferences" to set key value and then send json response.

Romesh Romesh · Accepted Answer · 2016-08-23T06:03:29

You are using status variable at controller scope level. Hence whatever last update occur on status from any control will be final view value. Hence you are not getting expected output.

Here is the updated plunkr

Angularjs: Use ng-repeat=“(key, value) in myObj” to show data from json

1 Answers