Вот мой код для углового js и ионного каркасного приложения.
Код:
Код HTML:
<ion-header-bar class="bar-calm">
<h1 class="title">Application Permissions</h1>
</ion-header-bar>
<ion-nav-view name="home">
<div class="bar bar-subheader bar-positive">
<h3 class="title"> {{app_name }}</h3>
</div>
<ion-content class="has-subheader">
<div class="list" ng-controller="CheckboxController">
<ion-checkbox ng-repeat="item in devList track by item.text" ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">
{{ item.text }}
<h3 class="item-text-wrap"> {{ item.details }}</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>
Код 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.app_name = JSON.stringify($scope.applicationdata.applicationname);
$scope.devList = JSON.stringify($scope.applicationdata.permissions);
console.log("Application Name : " + $scope.app_name);
console.log("Permissions : " + $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);*/
}
};
});
Ошибка :
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in devList track by item.text, Duplicate key: undefined, Duplicate value: {
Json:
{
"applicationname": "Facebook",
"permissions": [
{
"text": "Device & app history",
"details": "Allows the app to view one or more of: information about activity on the device, which apps are running, browsing history and bookmarks",
"checked": "false"
},
{
"text": "Identity",
"details": "Uses one or more of: accounts on the device, profile data",
"checked": false
}]
}
Вопросов:
Почему эта ошибка появилась? Я не вижу, что в моем json есть дубликат. Я также пробовал отслеживать по индексу $ index, но не работал. На самом деле он удаляет повторяющуюся ошибку, но я вижу много пустых флажков.
На данный момент я получаю значение "applicationname"
как "Facebook"
. На самом деле я хочу, чтобы он был только Facebook
. Что я должен изменить при анализе json.
Любая помощь будет оценена по достоинству.
$scope.app_name = JSON.stringify($scope.applicationdata.applicationname);
и $scope.devList = JSON.stringify($scope.applicationdata.permissions);
оба кажутся подозрительными. Похоже, вы получаете данные JSON и строжайше.
Что касается вопроса № 1, кажется, что ng-repeat, вероятно, перебирает строку, которую он рассматривает как массив символов. Не зная точного содержимого $scope.applicationdata.applicationname
и $scope.applicationdata.permissions
Я не могу сказать точно, но это, безусловно, вызовет вашу проблему.
Что касается вопроса № 2, я не уверен на 100%, что вы имеете в виду.
Проблема в том, что вы используете ретранслятор для булевых значений, поэтому, если есть 2 отмеченных или 2 непроверенных элемента, они помечены как дубликаты:
<ion-checkbox ng-repeat="item in devList track by item.text" ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">
Я бы рекомендовал вам использовать ng-repeat в содержащем div, например:
<div ng-repeat="item in devList">
<ion-checkbox ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">
</div>
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in devList, Duplicate key: string:t, Duplicate value: t
<div ng-repeat="item in devList"> <ion-checkbox ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)"> {{ item.text }} <h3 class="item-text-wrap"> {{ item.details }}</h3> </ion-checkbox> </div>