Ошибка Angular.js: Дубликаты в повторителе не допускаются - Отслеживание по индексу не работает

0

Вот мой код для углового 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
        }]

}

Вопросов:

  1. Почему эта ошибка появилась? Я не вижу, что в моем json есть дубликат. Я также пробовал отслеживать по индексу $ index, но не работал. На самом деле он удаляет повторяющуюся ошибку, но я вижу много пустых флажков.

  2. На данный момент я получаю значение "applicationname" как "Facebook". На самом деле я хочу, чтобы он был только Facebook. Что я должен изменить при анализе json.

Любая помощь будет оценена по достоинству.

Теги:
ionic-framework

2 ответа

2
Лучший ответ

$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%, что вы имеете в виду.

  • 0
    Большое спасибо. Я думаю, что ваше предложение будет работать для обоих моих вопросов.
  • 0
    Ваше предложение решило обе проблемы :)
Показать ещё 4 комментария
1

Проблема в том, что вы используете ретранслятор для булевых значений, поэтому, если есть 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>
  • 0
    Спасибо за Ваш ответ. не работает. Это дает ошибку, как это. 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
  • 0
    Я изменил, как вы предложили: <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>
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню