我正在离子框架中开发一个原型应用程序。我是角度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的回答。在此之前,应该解决第一个问题。
请提前帮助我。
答案 0 :(得分:2)
好的,所以我不能100%确定你想要什么,但我会捅它。在将来,发布更少的代码(可能不是您正在处理的整个项目)会很有帮助。制作一个比真实&#34;真实&#34;更简单的例子是一个好主意。一,你可以在那里学习你需要学习的东西,然后将它应用到&#34;真正的&#34;你有的代码。
无论如何,这个例子是一个简单的按钮,你点击它来改变显示的内容。
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;