在ng-repeat对象中使用日期选择器时无限$ digest循环

时间:2015-07-27 10:00:10

标签: angularjs twitter-bootstrap angular-ui bootstrap-datepicker

我在angularjs中的ng-repeat中使用ui-bootstrap日期选择器。但是在任何日期选择时,我在控制台中收到Infinite $ digest Loop错误。我有一个像下面这样的数据结构。

add($added);
$counter += $added;

为了解释上述结构,我有彩色滤光片的组合。外部数组表示组合,而combination.columns将是为过滤目的而选择的列。 所以,我的html ng-repeat结构如下所示

$scope.colorConfigData = [
  {
    "columns": [
      {
        "label": "Employee Id",
        "type": "int8",
        "componentType": "Text field",
        "filters": [
          {
            "id": "=",
            "text": "equal to"
          },
          {
            "id": "!=",
            "text": "not equal to"
          },
          {
            "id": "<",
            "text": "less than"
          },
          {
            "id": ">",
            "text": "greater than"
          },
          {
            "id": "<=",
            "text": "less than equal to"
          },
          {
            "id": ">=",
            "text": "greater than equal to"
          },
          {
            "id": "between",
            "text": "in between"
          },
          {
            "id": "is not null",
            "text": "has any value"
          },
          {
            "id": "is null",
            "text": "has no value"
          }
        ],
        "operator": "=",
        "filterValue": "5"
      },
      {
        "label": "Date Of Birth",
        "type": "timestamp",
        "componentType": "Date",
        "filters": [
          {
            "id": "=",
            "text": "equal to"
          },
          {
            "id": "!=",
            "text": "not equal to"
          },
          {
            "id": "<",
            "text": "less than"
          },
          {
            "id": ">",
            "text": "greater than"
          },
          {
            "id": "between",
            "text": "in between"
          },
          {
            "id": "is not null",
            "text": "has any value"
          },
          {
            "id": "is null",
            "text": "has no value"
          }
        ],
        "operator": "=",
        "first_dt_inp_opnd": false,
        "filterValue": "2015-07-27T18:30:00.000Z"
      }
    ],
    "colorColumns": [
      {
        "label": "Employee Id",
        "type": "int8",
        "componentType": "Text field"
      },
      {
        "label": "Date Of Birth",
        "type": "timestamp",
        "componentType": "Date"
      }
    ]
  }
]

对于像int8(文本字段)这样的其他字段,它的工作正常。但是当我选择日期选择器变量时,我得到无限的摘要错误。我想知道什么可能引发这种情况。

** updateColorColumnFilter(),将列推送到colorConfigData [index] .columns。

<div class="row" ng-repeat="colorCombination in colorConfigData" ng-form="colorCombinationForm">

<select class="form-control" ng-change="updateColorColumnFilter(colorCombination.currentColumn, $index)" ng-model="colorCombination.currentColumn" ng-options="colorColumn as colorColumn.label for colorColumn in colorCombination.colorColumns" name="colorColumn" data-placeholder="{{entity + 'Select Column'| translate}}">
<option value="">Select Column</option></select>

<div ng-repeat="colorConfig in colorCombination.columns" ng-form="colorForm">
<!-- choose operator-->
<!-- if colorConfig.operator === int8, then text box -->
<!-- if colorConfig.operator === timestamp, then datepicker below -->
<input type="text" class="form-control" placeholder="{{format}}" datepicker-popup="{{format}}" name="filterValFirst" required ng-model="colorConfig.filterValue" is-open="colorConfig.first_dt_inp_opnd"/>
<span class="input-group-btn"><button class="btn btn-default" ng-click="open($event, 'first_dt_inp_opnd', colorConfig)"><i class="glyphicon glyphicon-calendar"></i></button></span>
</div>
</div>

感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

我的坏!! datepicker或ng-repeat都没有错。我不知何故最终再次将日期模型包装到新的Date()。所以描述了无限的$ digest循环。