AngularJS中不使用ng-model实现表格复选框勾选/取消勾选的方法问询

Hey there, let's break down why your direct DOM manipulation isn't working, and cover both the recommended approach and the "no ng-model" workaround.

Why Your jQuery/angular.element Attempts Aren't Working #

AngularJS is a data-driven framework—when you use ng-model, it creates a two-way binding between your view (the checkbox) and your model ($scope.selected[item.Id]). When you manually tweak the checked attribute via DOM methods, Angular's digest cycle will eventually sync the model state back to the view, overwriting your manual change. That's why your checkboxes don't stay checked/unchecked as expected.

The Right Way: Manipulate the Model (Recommended) #

Since you're already using ng-model="selected[item.Id]", forget about touching the DOM entirely. Just update the model value, and Angular will handle updating the checkbox for you automatically:

// Check the checkbox
$scope.selected[item.Id] = true;

// Uncheck the checkbox
$scope.selected[item.Id] = false;

If you need to handle batches (like checking multiple items at once), loop through your data and update the model entries:

angular.forEach($scope.yourItemList, function(item) {
  // Add your condition here (e.g., check all items in a category)
  if (item.shouldBeChecked) {
    $scope.selected[item.Id] = true;
  }
});

This aligns with Angular's core principles, keeps your code clean, and avoids any sync issues between the view and model.

Can You Do This Without ng-model? #

Technically yes, but it's strongly discouraged—it fights against Angular's design, makes your code harder to maintain, and risks creating inconsistencies between your UI and data. That said, if you absolutely have to go this route, here's how:

Use prop() instead of attr() (since checked is a DOM property, not just an attribute), and trigger Angular's digest cycle to let it know about the change:

// Check the box
var checkboxElement = angular.element('#chksitecolumn_' + item.Id);
checkboxElement.prop('checked', true);

// Tell Angular to sync the change (only necessary if you still need model alignment)
$scope.$apply();

If you want to completely ditch ng-model, you'd have to manually listen to change events on the checkboxes to track their state—but this is basically going back to jQuery-style DOM manipulation, which defeats the purpose of using Angular in the first place.

Final Takeaway #

Stick to manipulating the selected model tied to ng-model—it's the Angular way, and it'll save you from headaches down the line.

内容的提问来源于stack exchange，提问作者Gaurav_0093