Я разрабатываю одно прототипное приложение в ионной структуре. Я новичок для угловых 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: Как я могу перемещаться по всем элементам. Я попробую ответить @Джона Карпентера. Перед тем, как первая проблема должна быть решена.
Пожалуйста, помогите мне, спасибо заранее.
Хорошо, поэтому я не уверен на 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>