javascript 角度切换开关如何检测变化/点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22244750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular-toggle-switch how to detect change/click?
提问by John Westhoff
I am a Angular newbee trying to use the Angular-toggle-switch designd by CGARVIS: http://cgarvis.github.io/angular-toggle-switch. Unfortunately there is not a lot of documentation and the "normal" Angular option like ng-click etc wont work.
我是一个 Angular 新手，试图使用 CGARVIS 设计的 Angular-toggle-switch：http://cgarvis.github.io/angular-toggle-switch 。不幸的是，没有很多文档，像 ng-click 等“正常”的 Angular 选项不起作用。
I've managed tot set the initial value of the toggle button based on if a certain value is present in a JSON object:
我已经设法根据 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>
The setting of the initial true/false is done by this function:
初始真/假的设置由这个函数完成：
$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;
};
For now this gives me a page with listitems , each with a togglebutton set to the right initial value. BUT:
现在这给了我一个带有 listitems 的页面，每个页面都有一个设置为正确初始值的切换按钮。但：
-How can i detect change ( or click event) of each seperate button?
- 如何检测每个单独按钮的变化（或点击事件）？
-Why can't i reference the "Bespreken" value in a Angular way like $scope.Bespreken?
- 为什么我不能像 $scope.Bespreken 这样以 Angular 的方式引用“Bespreken”值？
- where can i find more info/examples about using the Angular-toggle-switch?
- 我在哪里可以找到有关使用 Angular-toggle-switch 的更多信息/示例？
回答by Sensei
Try adding on-change in toggle-switch like this:
尝试在切换开关中添加 on-change 像这样：
<toggle-switch
model="switchStatus"
on-label="Hide"
off-label="Show"
on-change="switchFilters()">
<toggle-switch>
than in your controller:
比在您的控制器中：
switchFilters = function (){
// Do whatever u want to do
}
but before all this add it in module
但在这一切之前将它添加到模块中
var app= angular.module('app', ['toggle-switch']);
回答by Chinokao
You are using
您正在使用
<toggle-switch model="Bespreken"... ></toggle-switch>
and should be
并且应该是
<toggle-switch ng-model="Bespreken"... ></toggle-switch>
I've solved some problems with the scope using ng-click this way:
我已经使用 ng-click 这种方式解决了范围的一些问题：
<toggle-switch
ng-model="Bespreken"
ng-click="switch(Bespreken)"
on-label="Ja"
off-label="Nee">
</toggle-switch>
Hope it helps
希望能帮助到你
回答by A?ssa Ghouti
You can use watchCollection to automatically detect changes in model.
您可以使用 watchCollection 自动检测模型的变化。
$scope.$watchCollection('switchStatus', function() { ... });
回答by Kevin Anderson
For anyone who may come across this, I ended up adding the on-change to the directive scope so that I could use the syntax from Sensei's answer. It only took a couple lines of code in the angular-toggle-switch.js file and it seems to be working alright. Disclaimer: I am somewhat new to angular, so maybe this isn't the ideal approach.
对于可能遇到此问题的任何人，我最终将 on-change 添加到指令范围，以便我可以使用 Sensei 答案中的语法。在 angular-toggle-switch.js 文件中只用了几行代码，它似乎工作正常。免责声明：我对 angular 有点陌生，所以也许这不是理想的方法。
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
}
}
}
