使用对象/数组作为复选框的值,并在控制器之间共享。

19 浏览
0 Comments

使用对象/数组作为复选框的值,并在控制器之间共享。

我有一个两部分的表单,其中一页允许用户通过复选框从几个列表中选择。用户进行选择后,可以在另一页上看到选择的摘要。然后用户可以返回到复选框列表并根据需要进行选中/取消选中操作。

我可以让用户的选择持久化,但是无法让输出正确显示在主页面上(摘要列表)。或者,如果我让输出以item.name的形式正确显示,那么当用户返回到二级页面的复选框列表时,无法使选择保持持久化。控制器之间的共享并不是真正的问题。问题在于当用户返回到复选框列表时,无法使复选框保持选中状态。例如,当我输出{{checkedCity}}时,我可以看到其中的所有内容。我只是无法使复选框反映出这一点。

这似乎与数据在工厂中的输入方式有关:如果我在复选框输入中使用value="item.name",那么只有名字字符串添加到工厂中。但是我也需要id,因为那是我将实际发送给api的内容。所以如果我改为value="item",那么我可以使输出看起来很好,并且我获得了id,但是如果用户重新访问页面,我就无法保持持久性。

我的直觉(可惜没有帮助我)是工厂无法看到它包含的对象与复选框ng-repeat中输出的对象相同。我尝试过ng-click、ng-checked,现在我正在尝试使用webStorage插件。我还尝试循环遍历工厂并将其与复选框列表进行比较。

这是plunk链接:http://plnkr.co/edit/akvFJrPP7YtOoNBDS0Hx?p=preview

最佳解决方法是什么?不管我如何存储信息,根本问题在于似乎无法使复选框列表与已存储的内容相一致,无法知道是否选中了某些内容。

非常感谢您提前的帮助!

0
0 Comments

问题的出现原因是目前的ngTrueValue指令只支持字符串,不支持表达式。解决方法是创建一个类似ngTrueValue的指令,支持表达式,这样ngModel可以在复选框被选中时与对象或数组进行注册。目前可以创建一个额外的对象或数组作为复选框的模型,并使用该组数据来确定要显示的内容。

在给出的代码示例中,创建了一个名为checkboxService的工厂,其中包含了城市和州的数据,以及用于复选框的检查数组。然后,在控制器中将checkboxService注入到$scope中,以便在视图中访问这些数据。通过使用ng-repeat指令和ng-model指令,可以根据checkboxService中的数据生成复选框,并将选中的复选框状态存储在checkboxService的检查数组中。然后,可以使用ng-repeat指令和ng-show指令根据checkboxService的检查数组来显示所选内容。

这种方法的优点是能够使用对象和数组作为复选框的值,并且可以在不同的控制器之间共享这些值。这种解决方法简洁而优雅,能够满足需求。

0