Question

I am working with an angular checkbox filter based on the one in this jsfiddle (from another question). http://jsfiddle.net/rzgWr/502/

I don't want to use the default checkboxes so I have 'linked' two div's to the checkboxes using jquery like this:

var toggleVar = 0;
$("#check-1").bind('click', function() {
    if(toggleVar % 2 == 0) {
        $(".check-item:first-child input").prop('checked', true);
    }
    else {
        $(".check-item:first-child input").prop('checked', false);
    }
    toggleVar++;
});
});

My jquery works correctly with the html and checks the box, but the angular model doesn't detect the change and fails to 'refresh' itself (digest?) to update the filtered output (see jsfiddle for context).

What do I need to add to ensure that the angular model will detect the click, or detect the jquery-made change in the checkboxes' status? Do I write changes into the jquery file or in the angular controller?

I understand it's messy to work with jquery and angular, so if there is an angular-only option please enlighten me.

Answer 1

在具体示例中，如果我正确地获得目标，则必须将所有必须触发复选框的代码放在label内。这样就会自动检查复选框

<label><input type="checkbox" ng-model="usePants[pants]"/><b>{{pants}}</b></label>

如果“触发”div更加断开，则更通用的方法是更新ng-click内的数据字段本身（例如usePants[pants] = !usePants[pants]）。唯一需要注意的是，除非你停止传播，否则你不能绑定到包含div或粗体元素。否则单击复选框本身会加倍。这里的替代方法是使用额外的span或移动b元素，使其不包含输入。

<input type="checkbox" ng-model="usePants[pants]"/><b ng-click="usePants[pants]= !usePants[pants]">{{pants}}</b>

fiddle

当然，我可能完全误解了这个问题。这假设单击复选框旁边的文本会更新两个复选框并触发angularisjs过滤。

Linking div click event to angular filter checkboxes

1 个答案: