Question

我正在离子框架中开发一个原型应用程序。我是角度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％确定你想要什么，但我会捅它。在将来，发布更少的代码（可能不是您正在处理的整个项目）会很有帮助。制作一个比真实＆＃34;真实＆＃34;更简单的例子是一个好主意。一，你可以在那里学习你需要学习的东西，然后将它应用到＆＃34;真正的＆＃34;你有的代码。

无论如何，这个例子是一个简单的按钮，你点击它来改变显示的内容。

＆＃13;

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;
    };
}]);

＆＃13;

.simple-button {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

如何在Angular JS中逐个显示来自json数组的项目

1 个答案: