Question

我正在服务中创建一个数组并从数据库中获取一些数据并对数据进行迭代以将组ID添加为数组中的键

angular.module('tasksApp').
factory("data", ["$http", function ($http) {

    var data = {};
    data.allTasks = {};
    data.today = [];
    data.actioned = [];
    data.complete = [];
    data.todaysNextNumber = 0;
    data.groups = [];
    data.groupNames = [];
    data.nextGroupPosition = [];


    data.loadTasks = function () {
      return $http({
        method: 'GET',
        url: '/loadTasks'})
      .then(function(response) {
        data.allTasks = response.data;
        // Get groups & create the arrays
        getGroups().then(function(result) {
          var allGroups = result;
          for (var key in allGroups) {
            var group = allGroups[key];
            data.groups[group.group_id] = [];
            data.groupNames[group.group_id] = group.group_name;
            data.nextGroupPosition[group.group_id] = 0;
          }

数据的id以1开头，最多为9。

然后，在组件中我将数据加载到范围：

angular.module('tasksApp').
component('tasks', {
templateUrl: 'tasks/template.tasks.html',
controller: function startUp($scope, $rootScope, data) {
  // Get tasks
  data.loadTasks().then(function(response) {
    $scope.groups = data.groups;
    $scope.today = data.today;
    $scope.actioned = data.actioned;
    $scope.groupNames = data.groupNames;
    console.log($scope.groups);
  })
}

}）;

并使用ng-repeat来检查模板中的数据：

<!-- Start of Groups -->
<div ng-repeat="(key, group) in groups" class="col-md-3">
  <div class="groupBox">
    <div ng-attr-id="{{'groupCell-' + key}}" ng-click="showTitleInput(key)">
      <h1 ng-attr-id="{{'groupTitle-' + key}}">{{groupNames[key]}} - {{key}}</h1>
      <input class="groupTitleInput" ng-attr-id="{{'groupInput-' + key}}" ng-value="groupNames[key]"></input></div>

      <div ng-attr-id="{{'div' + key}}">
        <div ng-repeat="task in group | orderBy:'position'" ng-attr-id="{{'task-' + task.id}}" class="taskContainer">
          <div ng-attr-id="{{'taskText-' + task.id}}" class="taskText" ng-click="displayActionBar = !displayActionBar">{{task.task}}</div>
          <div ng-attr-id="{{'actionBar-' + task.id}}" class="actionBar" ng-show="displayActionBar">
            <div class="actionButton glyphicon glyphicon-globe todaysTasks" ng-click="displayActionBar = !displayActionBar; addToToday(task.id, task.group_id)"></div>
            <div class="actionButton glyphicon glyphicon-ok actioned" ng-click="displayActionBar = !displayActionBar; markAsActioned(task.id, task.group_id)"></div>
            <div class="actionButton glyphicon glyphicon-thumbs-up complete" ng-click="displayActionBar = !displayActionBar; markAsComplete(task.id, task.group_id)"></div>
            <div class="actionButton glyphicon glyphicon-trash delete" ng-click="displayActionBar = !displayActionBar; deleteTask(task.id, task.group_id)"></div>
            <div class="actionButton glyphicon glyphicon-remove cancel" ng-click="displayActionBar = !displayActionBar"></div>
            <div class="actionButton glyphicon glyphicon-menu-up up" ng-click="pushUp(task.id, task.group_id)"></div>
            <div class="actionButton glyphicon glyphicon-menu-down down" ng-click="pushDown(task.id, task.group_id)"></div></div></div></div>
    <form ng-submit="addTask(key)" ><input name={{key}} class="newTaskInput" type="text" ng-model="newTaskDescription" /><form></div></div>

所有这些都可以正常工作，但是当显示数据时，会显示“0”元素的div。如果我使用console.log打印出数组，它不显示'0'元素。此外，如果我将id为1的数据更改为0，它也会迭代1个元素。我认为ng-repeat使用指定的键迭代数组中的元素，而不是从0到元素的数量。

有谁知道为什么会这样？

ng-repeat向数组

0 个答案: