如何接一个角JS显示从JSON数组一个项目 [英] How to show item from json Array one by one in Angular JS
问题描述
我在开发框架离子样机1应用。我对角JS，HTML，CSS，Java脚本和所有这些东西新手。
我有我使用作为一个输入的一个JSON文件。我能够解析此JSON文件，并能够从此得到JSON对象。此JSON对象包含的项目数组。您可以参考以下内容的JSON此。以下项目是应用程序A，B ......
更新的输入JSON：
{
数据：
{
的applicationName：A，
权限：
{
文：在
}，
{
文：AT1
}
]
}，
{
的applicationName：B
权限：
{
文：BT
}，
{
文：BT1
}
]
}
]
}
在当时的应用程序启动应该从上面的JSON数组加载只有第一项数据，这意味着只有应用程序A（第一项）的数据第一次。
一旦在任何按钮用户点击来自页脚（安装/取消），那么就应该改变其数据和显示应用程序B的内容。这个过程应该持续到年底JSON阵列。
我目前的code未装载甚至第一个项目的数据。我做错了什么在HTML中。
更新code：
HTML文件：
＆LT;离子标题栏类=扎平静＆GT;
＆LT; H1类=标题＆GT;应用程序的权限＆LT; / H1＆GT;
＆LT; /离子头吧＆GT;
＆LT;离子导航视图名称=家NG-重复=应用程序中的ApplicationData＆GT;
＆LT; DIV CLASS =酒吧酒吧酒吧副标题阳性＆GT;
＆LT; H3类=标题＆GT; {{app.applicationname}}＆LT; / H3 GT＆;
＆LT; / DIV＆GT;
＆LT;离子内容类=有-副标题＆GT;
＆LT; DIV CLASS =清单NG控制器=CheckboxController＆GT;
＆LT;离子复选框NG重复= NG-模式app.permissions项目=item.checkedNG-检查=selection.indexOf（项目）-1个NG点击=toggleSelection（项目） ＆GT;
{{item.text}}
＆LT; H3类=项目文本换行＆GT;细节很快到来＆LT; / H3 GT＆;
＆LT; /离子复选框＆GT;
＆LT; DIV CLASS =项＆GT;
＆LT; pre NG绑定=评选| JSON＆GT;＆LT; / pre＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =项＆GT;
＆LT; pre NG绑定=选择1 | JSON＆GT;＆LT; / pre＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /离子含量＆GT;
＆LT;离子躯杆对齐标题=左类=扎灯NG控制器=FooterController＆GT;
＆LT; DIV CLASS =按钮＆GT;
＆LT;按钮类=按钮按钮平衡NG点击=infunc（）＆GT;安装＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; H1类=标题＆GT; ＆LT; / H1＆GT;
＆LT; DIV CLASS =按钮NG点击=DoSomething的（）＆GT;
＆LT;按钮类=按钮按钮平衡＆GT;取消＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /离子页脚酒吧＆GT;
＆LT; /离子NAV-视图＆gt;
app.js文件：
pmApp.controller（'CheckboxController'，函数（$范围，$ HTTP，DataService的）{
//定义，做Ajax调用该函数
getmydata =功能（）{
返回$ http.get（JS / sample.json）
.success（功能（数据）{
$ scope.applicationdata =数据;
}）; } //做Ajax调用
getmydata（）。成功（功能（数据）{
//现在的东西是在我们的范围，我可以提醒它
$ scope.data = $ scope.applicationdata.data;
$ scope.devList = $ scope.data [0] .permissions;
的console.log（数据：+ JSON.stringify（$ scope.data））;
的console.log（第一应用数据：+ JSON.stringify（$ scope.devList））;
}）; $ scope.selection = [];
$ scope.selection1 = [];
//切换选择按名称给定的员工
$ scope.toggleSelection =功能toggleSelection（项目）{
VAR IDX = $ scope.selection.indexOf（项目）;
VAR jsonO = angular.copy（项目）;
jsonO.timestamp = Date.now（）; DataService.addTrackedData（jsonO）;
$ scope.selection1 = DataService.getTrackedData（）; //当前选择
如果（IDX -1个）{
$ scope.selection.splice（IDX，1）; }
//新选择
其他{
DataService.addSelectedData（项目）;
$ scope.selection = DataService.getSelectedData（）;
/ * $ scope.selection.push（项目）; * /
}
};}）;
问题：
1：为什么第一项数据是不加载，我做的HTML变化按我的理解，它不工作
2：我如何通过全项导航。我会尽量@约翰卡朋特的答案。在此之前，第一个问题应该可以解决。
请帮帮我，先谢谢了。
OK，所以我敢肯定，你想要什么不是100％，但我会在它采取刺伤。在未来，这将有助于张贴少code（可能不是整个项目您正在使用）。这是一个好主意，以比真正之一，在那里可以学到你需要学习，然后去把它应用到真正的code，你有什么简单的例子。
不管怎么说，这个例子是，你点击改变显示的内容一个简单的按钮。
VAR应用= angular.module（'所有MyApplication'，[]）;\r
\r
app.controller（'myController的'，['$范围'，函数（$范围）{\r
$ scope.indexToShow = 0;\r
$ scope.items = [\r
项目1，\r
项目2，\r
项目3\r
];\r
\r
$ scope.change =功能（）{\r
$ scope.indexToShow =（$ scope.indexToShow + 1）％$ scope.items.length;\r
};\r
}]）; \r
。简单按钮{\r
光标：指针;\r
} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; DIV NG-应用=MyApplication的NG控制器=myController的＆GT;\r
＆LT; DIV NG重复=项中的项目跟踪由$指数NG-秀=$指数== indexToShow＆GT;\r
{{项目}}\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =简单按钮NG点击=更改（）＆gt;点击ME＆LT;！/ DIV＆GT;\r
＆LT; / DIV＆GT; \r
I am developing one prototype application in ionic framework. I am newbie for angular js, HTML, CSS , Java Script and all this stuff.
I have one json file which I am using as a input. I am able to parse this Json file and able to get json object from this. This json object contains array of items. You can refer below json content for this. Here items are application A,B.....
Updated Input Json :
{
"data": [
{
"applicationname": "A",
"permissions": [
{
"text": "at"
},
{
"text": "at1"
}
]
},
{
"applicationname": "B",
"permissions": [
{
"text": "bt"
},
{
"text": "bt1"
}
]
}
]
}
First time when application start at that time application should load only first item data from above json array that means only application "A" (first item) data.
Once user click on any buttons (install/cancel) from Footer then it should changed its data and display application "B"'s contents. This process should continue till end json array.
My current code is not loading even first item data in. I am doing something wrong in HTML.
Updated Code :
HTML file :
<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 file :
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);*/
}
};
});
Problems :
1 : Why first item data is not load, I have done changes in HTML as per my understanding, Its not working.
2 : How Can I navigate through all items. I will try @John Carpenter's answer. Before that first problem should be resolved.
Please help me, thanks in advance.
OK, so I'm not 100% sure what you want but I'll take a stab at it. In the future, it would be helpful to post less code (probably not the entire project you are working on). It is a good idea to make a simpler example than the "real" one, where you can learn what you need to learn and then go apply it to the "real" code that you have.
Anyways, this example is a simple button that you click on to change what is displayed.
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>
这篇关于如何接一个角JS显示从JSON数组一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
