Question

我有一个复选框，可以使用angular更改其true / false之间的状态，但我想要设置样式，使其看起来不像标准复选框。所以我的想法是隐藏复选框并有一个链接（我可以设置样式），它将触发复选框的选中/取消选中状态。

因此，通过使用jquery，我可以很容易地实现这一点。问题是angular没有选择这个更改，我用范围读取。$ apply（function（）{}）并将jquery放在那里就可以解决这个问题。但情况并非如此。请帮帮我，我在这里想念的是，还有另外一种方法吗？

HTML

<div ng-controller="mainCtrl">
    <a toggle><i class="fa fa-trash-o"></i></a>
    <input ng-model="item.status" type="checkbox">
<div>

脚本

app.directive('toggle', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).bind('click', function() {
                scope.$apply(function() {
                    $(this).next().prop('checked', false);
                });
            });
        }
    };
});

Answer 1

如果你不隐藏它并让别的东西改变它，它是最好的。通常你会触发改变

~~$（this）.next（）。prop（＆＃39; checked＆＃39;，false）.trigger（＆＃39; change＆＃39;）;~~

但这可能不适用于角度。

相反，使复选框不可见并使用标签，该标签将使用标准浏览器行为触发其匹配复选框（使用id和for），而不使用javascript。

<input ng-model="item.status" type="checkbox" id="some-checkbox" /> <!-- hide this -->
<label for="some-checkbox" toggle><i class="fa fa-trash-o"></i></label>

我不知道给定代码中的切换语法是否正确，我只知道标签点击触发器复选框更改

范围。$ apply在使用jquery时不启动

1 个答案: