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

时间:2016-03-16 17:03:25

标签: javascript angularjs checkbox angular-ui

如果有一个元素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> 有属性。该URL属性应根据复选框更改。如果单击一个复选框,则应显示url1,而如果单击第二个复选框,则应显示第二个URL。

现在我这样做,

test-me

上述方法的问题是,如果我有10个复选框,那么将有10个release个元素。如何以更好的方式执行此操作,以便我以某种方式提供URL,具体取决于复选框值或其他内容,但会有更多模块化。

1 个答案:

答案 0 :(得分:0)

您可以使用控制器变量来存储所有复选框。因此,在您的控制器中使用数组来存储所有模型:

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}}