Angularjs：使用 ng-repeat="(key, value) in myObj" 显示来自 json 的数据

Question

我正在创建一个通知应用程序，它将通过电子邮件和短信发送通知。启动时将设置为 true（无法更改 json 数据）

我创建了切换按钮，它将每封电子邮件和短信的状态更改为真假。当状态为真假时，需要再次发送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