AngularJs ng-repeat track by $index issue with angular-bootstrap-switch [英] AngularJs ng-repeat track by $index issue with angular-bootstrap-switch

问题描述

我遇到了 添加新项目时，它会根据 $index 重用数组中的第一个元素，因此它不会重新渲染 (这就是我从这个文档中得到的).我的问题是前一个元素有开关.

我遇到的 DOM 效果问题是switch-on"类不会在新项目上刷新，而是继续存在.

预期:在这种情况下，我想关闭而不是像图像那样打开.因为它是一个空对象

P/s:业务原因

• 我无法为该开关添加默认值.它必须是一个空对象

• 我也不能使用项目对象的任何标识符来跟踪替换到 $index

• 如果我通过 $id 使用默认轨道，它也会导致一些业务问题

适用于 Angular 1.5 或更高版本的临时解决方案:

使用 angular 1.5，您可以使用 angular-bootstrap-switch 0.5.1

它会解决这个问题，在 frapontillo 发布一个更改后:在模型更改时触发开关更改""

非常感谢您的支持.

解决方案

我从你的问题中了解到，你想向主数组添加一个新项目，当它呈现时，你希望它的开关 关闭 默认情况下.

好吧，您需要记住几件事.

1. ng-repeat 仅在我们的 DOM 中表现为循环.

2. 如果你想在默认情况下关闭开关，你必须在主数组的每个项目中都有一个模型.它将跟踪 DOM 中每个开关的状态.

这是您应该尝试的内容

来自您的控制器:

newItem = {switchState: 0};items.splice(0, 0, newItem);

来自您的 HTML:

<!-- 您的姓名和说明输入字段.. --><输入bs-switchng-model="item.switchState"/>

所以我认为您忽略了导致问题的 angular-bootstrap-switch 的 ng-model.

I am having an issue with AngularJs ng-repeat and angular-bootstrap-switch

I am using:

ng-repeat="item in items track by $index"

When I added a new item into the first index of array by:

newItem = {};    
items.splice(0, 0, newItem);

The DOM contain a bs-switch: When a new item added it reuse the first element in array base on $index, so it doesn't re-render (that's what I get from this docs). The problem I have is the previous element has switch-on.

The DOM effect issue I have is the class "switch-on" doesn't refresh on new item and it keep on.

Expected: In this case I want to switch is off instead of on like the image. Cause it's an empty object

P/s: Cause of the business so

• I cannot add default value for that Switch. It need to be an empty object

• I also cannot use any identifier of the item object to track replace to $index

• If I use default track by $id it will cause some business issue also

TEMP SOLUTION FOR WHO WORKING ON Angular 1.5 or Upper:

With angular 1.5 and you can use angular-bootstrap-switch 0.5.1

It will fixed the issue, after frapontillo release a changed: "Make "switch-change" trigger when model changes"

Thank you so much for supporting.

解决方案

What I perceive from your question is that you want to add a new item to main array and when It renders, you want it's switch to be off by default.

Well there are couple of things you need to keep in mind.

1. ng-repeat only behaves as a loop in our DOM.

2. If you want to have the switch off by default, you must need to have a model for that in every item of the main array. It'll keep track of every switch's state in DOM.

Here's what you should try

From your controller:

newItem = {switchState: 0};    
items.splice(0, 0, newItem);

From your HTML:

<div ng-repeat="item in items track by $index">
<!-- your Name and Decription input fields.. -->

<input
    bs-switch
    ng-model="item.switchState" />

So I think you're ignoring ng-model of angular-bootstrap-switch which causes you the problem.

这篇关于AngularJs ng-repeat track by $index issue with angular-bootstrap-switch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！