Aşağıdaki şablonda varlıklar topluluğu oluşturan bir AngularJS directive var:

<table class="table">
  <thead>
    <tr>
      <th><input type="checkbox" ng-click="selectAll()"></th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="e in entities">
      <td><input type="checkbox" name="selected" ng-click="updateSelection($event, e.id)"></td>
      <td>{{e.title}}</td>
    </tr>
  </tbody>
</table>

Gördüğünüz gibi, bu bir <table> * * * * her satır seçilebilir ayrı ayrı kendi onay veya tüm satırlar seçilebilir aynı anda başka bir yüksek checkbox yer alan <thead>. Çok klasik UI.

En iyi yolu nedir:

• Seçin tek bir satır (yani ne zaman onay kutusunun işaretli, add kimliği seçilen varlık için bir dizi iç ve eklemek bir CSS sınıf <tr> içeren varlık yansıtacak şekilde seçilen devlet)?
• Tüm satırları aynı anda seçin? (yani <table>) tüm satırlar için daha önce açıklanan eylemleri yapmak

Benim şimdiki uygulama yönergesi benim için özel bir denetleyici eklemek için:

controller: function($scope) {

    // Array of currently selected IDs.
    var selected = $scope.selected = [];

    // Update the selection when a checkbox is clicked.
    $scope.updateSelection = function($event, id) {

        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        if (action == 'add' & selected.indexOf(id) == -1) selected.push(id);
        if (action == 'remove' && selected.indexOf(id) != -1) selected.splice(selected.indexOf(id), 1);

        // Highlight selected row. HOW??
        // $(checkbox).parents('tr').addClass('selected_row', checkbox.checked);
    };

    // Check (or uncheck) all checkboxes.
    $scope.selectAll = function() {
        // Iterate on all checkboxes and call updateSelection() on them??
    };
}

Daha spesifik olarak, merak ediyorum:

• Yukarıdaki kod bir denetleyicisi ait veya link bir işlevi gidecek?
• Bir WordPress kullanmak mutlaka (AngularJS bunu gerektirmez) olduğu göz önüne alındığında, DOM geçişi yapmak için en iyi yolu nedir? JQuery olmadan, zor bir zaman sadece belirli bir checkbox <tr> ebeveyn seçmek zorunda, ya da şablonda tüm onay kutularını seçerek yapıyorum.
• updateSelection() 12 *geçen çok şık görünmüyor. Orada daha iyi bir yolu sadece, tıklandığında bir eleman durumu (/denetlenmeyen kontrol) almak için değil mi?

Teşekkür ederim.

Bu bu tür şeyler yapıyorum. Açısal dom manipülasyon ve açıklayıcı olmaktan ziyade bir zorunluluk(en azından onunla oynuyorum böyle) iyilik eğilimindedir.

Biçimlendirme

<table class="table">
  <thead>
    <tr>
      <th>
        <input type="checkbox" 
          ng-click="selectAll($event)"
          ng-checked="isSelectedAll()">
      </th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="e in entities" ng-class="getSelectedClass(e)">
      <td>
        <input type="checkbox" name="selected"
          ng-checked="isSelected(e.id)"
          ng-click="updateSelection($event, e.id)">
      </td>
      <td>{{e.title}}</td>
    </tr>
  </tbody>
</table>

Ve denetleyicisi

var updateSelected = function(action, id) {
  if (action === 'add' && $scope.selected.indexOf(id) === -1) {
    $scope.selected.push(id);
  }
  if (action === 'remove' && $scope.selected.indexOf(id) !== -1) {
    $scope.selected.splice($scope.selected.indexOf(id), 1);
  }
};

$scope.updateSelection = function($event, id) {
  var checkbox = $event.target;
  var action = (checkbox.checked ? 'add' : 'remove');
  updateSelected(action, id);
};

$scope.selectAll = function($event) {
  var checkbox = $event.target;
  var action = (checkbox.checked ? 'add' : 'remove');
  for ( var i = 0; i < $scope.entities.length; i  ) {
    var entity = $scope.entities[i];
    updateSelected(action, entity.id);
  }
};

$scope.getSelectedClass = function(entity) {
  return $scope.isSelected(entity.id) ? 'selected' : '';
};

$scope.isSelected = function(id) {
  return $scope.selected.indexOf(id) >= 0;
};

//something extra I couldn't resist adding :)
$scope.isSelectedAll = function() {
  return $scope.selected.length === $scope.entities.length;
};

EDİT: getSelectedClass() ama şimdi düzeltilmiş olan varlık, yalnızca, kimliği ile çağrıldığını olduğunu tüm varlık bekliyor