我是一名Angular新手试图通过CGARVIS使用Angular-toggle-switch designd:http://cgarvis.github.io/angular-toggle-switch。不幸的是,没有很多文档,像ng-click等“正常”的Angular选项不会起作用。
我已设法根据JSON对象中是否存在某个值来设置切换按钮的初始值:
<div ng-repeat="agendapunt in aktieveVergadering.Agendapunten | orderBy:'VolgNr'" ng-init="search(agendapunt.AgendapuntCollegelid)">
<ul class="list-group">
<li class="list-group-item">
<table class="table-condensed apunttable">
<tr>
<td class="apuntvolgnr"><span class="badge pull-left">{{agendapunt.VolgNr}}</span></td>
<td class="apuntomschrijving">{{agendapunt.Omschrijving}}</td>
<td class="apuntkeuze"><toggle-switch model="Bespreken" on-label="Ja" off-label="Nee" /></td>
</tr>
</table>
</li>
</ul>
</div>
初始真/假的设置由此函数完成:
$scope.search = function (array) {
this.Bespreken = false;
for (var i = 0; i < array.length; i++) {
if (array[i].Volledigenaam == $scope.VolledigeNaam)
this.Bespreken = true;
return;
}
return;
};
现在这给了我一个包含listitems的页面,每个都有一个togglebutton设置为正确的初始值。但是:
- 我如何检测每个单独按钮的更改(或点击事件)?
- 为什么我不能以像$ scope.Bespreken这样的Angular方式引用“Bespreken”值?
答案 0 :(得分:3)
尝试在切换开关中添加如下更改:
<toggle-switch
model="switchStatus"
on-label="Hide"
off-label="Show"
on-change="switchFilters()">
<toggle-switch>
比你的控制器:
switchFilters = function (){
// Do whatever u want to do
}
但在此之前将其添加到模块
中var app= angular.module('app', ['toggle-switch']);
答案 1 :(得分:3)
您正在使用
<toggle-switch model="Bespreken"... ></toggle-switch>
应该是
<toggle-switch ng-model="Bespreken"... ></toggle-switch>
我通过这种方式使用ng-click解决了范围的一些问题:
<toggle-switch
ng-model="Bespreken"
ng-click="switch(Bespreken)"
on-label="Ja"
off-label="Nee">
</toggle-switch>
希望有所帮助
答案 2 :(得分:1)
您可以使用watchCollection自动检测模型中的更改。
$scope.$watchCollection('switchStatus', function() { ... });
答案 3 :(得分:-2)
对于任何可能遇到此问题的人,我最终都会在指令范围内添加更改,以便我可以使用Sensei的答案中的语法。它只需要在angular-toggle-switch.js文件中使用几行代码,它似乎工作正常。 免责声明:我对角度有些新意,所以也许这不是理想的方法。
scope: {
disabled: '@',
onLabel: '@',
offLabel: '@',
knobLabel: '@',
change: '&onChange' //Allows us to bind to a function call
},
...
...
...
link: function(scope, element, attrs, ngModelCtrl) {
...
...
...
scope.toggle = function toggle() {
if (isEnabled) {
scope.model = !scope.model;
ngModelCtrl.$setViewValue(scope.model);
scope.change(); //After updating the value, execute the callback
}
}
}