单击复选框时的角度显示一个元素

Angular when checkbox is clicked show one element

本文关键字：一个 元素 显示 复选框 单击      更新时间：2023-09-26
例如，

如果有一个元素test-me它采用URL具有属性。该 URL 属性应根据复选框而更改。如果单击一个复选框，则应显示 url1，而如果单击第二个复选框，则应显示第二个 url。

现在我这样做，

<input type="checkbox" ng-model="chk1"> Check1
<input type="checkbox" ng-model="chk2"> Check2
<test-me url="url1" ng-show="chk1"></test-me>
<test-me url="url2" ng-show="chk2"></test-me>

上述方法的问题在于，如果我有 10 个复选框，那么将有 10 个test-me元素。我怎样才能以更好的方式做到这一点，以便我根据复选框值或其他方式提供 URL，但会有更多的模块化。

您可以使用控制器变量来存储所有复选框。所以在你的控制器内部使用一个数组来存储所有模型： 

vm.controllers = [];

并在查看时将它们添加到数组中： 

<input type="checkbox" ng-model="ctrl.checkboxes[0]" />
<input type="checkbox" ng-model="ctrl.checkboxes[1]" />
<input type="checkbox" ng-model="ctrl.checkboxes[2]" />

所以现在在您的控制器上，您可以访问所有这些并执行您想要的任何计算并将它们存储在另一个控制器变量上，例如： 

vm.url = "http://blablabla";

在您的视图上使用它：{{ctrl.url}}

相关文章：