如何在Angular JS中一一显示json数组中的项目

Question

我正在 ionic 框架中开发一个原型应用程序。我是 Angular js、HTML、CSS、Java Script 和所有这些东西的新手。

我有一个 json 文件用作输入。我能够解析这个 Json 文件并能够从中获取 json 对象。此 json 对象包含项目数组。您可以参考下面的 json 内容。这里的项目是应用程序A，B.....

更新输入 Json：

{
    "data": [
        {
            "applicationname": "A",
            "permissions": [
                {
                    "text": "at"
                },
                {
                    "text": "at1"
                }
            ]
        },
        {
            "applicationname": "B",
            "permissions": [
                {
                    "text": "bt"
                },
                {
                    "text": "bt1"
                }
            ]
        }
    ]
}

当应用程序第一次加载时，应用程序应该只加载上面 json 数组中的第一项，这意味着只加载应用程序"A"（第一项）数据。

一旦用户单击页脚中的任何按钮（安装/取消），它就会更改其数据并显示application "B" 的内容。这个过程应该一直持续到 json 数组的末尾。

我当前的代码甚至没有加载第一个项目数据。我在 HTML 中做错了吗？

更新代码：

HTML 文件：

<ion-header-bar class="bar-calm">
    <h1 class="title">Application Permissions</h1>
</ion-header-bar>
<ion-nav-view name="home" ng-repeat="app in applicationdata">
    <div class="bar bar-subheader bar-positive">
        <h3 class="title"> {{app.applicationname }}</h3>
    </div>
    <ion-content class="has-subheader">
        <div class="list" ng-controller="CheckboxController">
            <ion-checkbox ng-repeat="item in app.permissions" ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">
                {{ item.text }}
                <h3 class="item-text-wrap"> details come soon </h3>
            </ion-checkbox>
            <div class="item">
                <pre ng-bind="selection | json"></pre>
            </div>
            <div class="item">
                <pre ng-bind="selection1 | json"></pre>
            </div>
        </div>
    </ion-content>
    <ion-footer-bar align-title="left" class="bar-light" ng-controller="FooterController">
        <div class="buttons">
            <button class="button button-balanced" ng-click="infunc()"> Install </button>
        </div>
        <h1 class="title"> </h1>
        <div class="buttons" ng-click="doSomething()">
            <button class="button button-balanced"> Cancel </button>
        </div>
    </ion-footer-bar>
</ion-nav-view>

app.js 文件：

pmApp.controller('CheckboxController', function ($scope, $http, DataService) {


    // define the function that does the ajax call
    getmydata = function () {
        return $http.get("js/sample.json")
            .success(function (data) {
                $scope.applicationdata = data;
            });

    }

    // do the ajax call
    getmydata().success(function (data) {
        // stuff is now in our scope, I can alert it
        $scope.data = $scope.applicationdata.data;
        $scope.devList = $scope.data[0].permissions;
        console.log("data : " + JSON.stringify($scope.data));
        console.log("first application data : " + JSON.stringify($scope.devList));
    });

    $scope.selection = [];
    $scope.selection1 = [];
    // toggle selection for a given employee by name
    $scope.toggleSelection = function toggleSelection(item) {
        var idx = $scope.selection.indexOf(item);
        var jsonO = angular.copy(item);
        jsonO.timestamp = Date.now();

        DataService.addTrackedData(jsonO);
        $scope.selection1 = DataService.getTrackedData();

        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);

        }
        // is newly selected
        else {
            DataService.addSelectedData(item);
            $scope.selection = DataService.getSelectedData();
            /* $scope.selection.push(item);*/
        }
    };

});

问题：

1 : 为什么第一项的数据没有被加载？根据我的理解，我已经对 HTML 进行了更改。

2：如何浏览所有项目。我会尝试@John Carpenter 的回答。在解决第一个问题之前。

请帮助我，提前谢谢。

Answer 1

好的，所以我不能 100% 确定您想要什么，但我会尝试一下。将来，发布更少的代码会很有帮助（可能不是您正在处理的整个项目）。制作一个比“真实”示例更简单的示例是个好主意，您可以在其中学习需要学习的内容，然后将其应用到您拥有的“真实”代码中。

无论如何，这个示例是一个简单的按钮，您可以单击它来更改显示的内容。

var app = angular.module('MyApplication',[]);

app.controller('MyController', ['$scope', function($scope){
    $scope.indexToShow = 0;
    $scope.items = [
        'item 1', 
        'item 2', 
        'item 3'
    ];
    
    $scope.change = function(){
        $scope.indexToShow = ($scope.indexToShow + 1) % $scope.items.length;
    };
}]);

.simple-button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApplication" ng-controller="MyController">
  <div ng-repeat="item in items track by $index" ng-show="$index == indexToShow">
    {{item}}
  </div>
  <div class="simple-button" ng-click="change()">click me!</div>
</div>