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

Question

如果有一个元素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元素。我怎样才能以更好的方式做到这一点，以便根据复选框的值提供URLs或其他东西，但会有更多的模块化。

Answer 1

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

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