angularjs: Güncelleştirme ng tekrar seçme kutusu (filtresi gibi) kodun

Question

ile değiştirilir I ng-repeat="item in items | filter:isselected(item)" ile dolu olsun bir öğe bulunmaktadır. Ben ng-model="selecteditem[$index]" ile onay kutularını oluşturulan filtre ve

$scope.selectedItems = []; 
$scope.isselected = function(item) { 
    return function(i) { 
     for (var a in $scope.selectedItems) { 
      if (i.name == $scope.selectedItems[i]) return true; 
     } 
    }; 
}; 

onay kutularını gizli ve genellikle <label> tıklayarak tetiklenen filtre için

, ama aynı zamanda koduna göre bunları tetiklemek gerekiyor (sadece dört onay kutusunu istiyorum Aynı anda kontrol edilmek için, ne kadarının işaretli olduğunu kontrol eden ve en son kutuyu işaretleyen bir direktif oluşturdum.
Ama ne yazık ki filtre ve böylece ng-repeat ürün filtre bir işlev tarafından değerlendirilir çünkü durumlarını değiştirerek yenilenmez.

Yani herhangi bir fikir bu nasıl çözmek ya da geçici bir çözüm için?

http://plnkr.co/edit/jlMnwRI3uJdQoPznBJey?p=preview

Answer 1

sen şeyler açısal şekilde yaparak düşünmeye başlar ve mümkün olduğunca az jQuery kullanmalıdır. Listeniz selectedItems dizisine dayalı olarak oluşturulmakta ve false için onay kutusunun ayarlanması diziden kaldırılmamaktadır, bu yüzden lisede hala görüyorsunuz. Aşağıdaki güncellenmiş plunkr'a bakın.

Bildirimi düğmesi artık ng-click kullanır ve Tıkladığınız anda aslında diziden Öğe2'yi kaldırır. Kullanmak

http://plnkr.co/edit/2mCMZkDjmFePOWcITQ4w?p=preview

Answer 2

Sen farklı bir şekilde bunu dikkate almak isteyebilirsiniz. Öğe başına bir onay kutusu istiyorsanız, onay kutularını göstermek ve bunları her bir öğenin üzerindeki işaretli bir özelliğe bağlamak için n ng-yineliğini kullanabilirsiniz. Daha sonra ng-yinelemede bir filtre kullanarak filtreleyebilirsiniz veya denetleyicinizde filtrelemeyi uygulayan ve yalnızca seçilen öğeleri döndüren bir işlev oluşturabilirsiniz. İşte böyle yapabilirsin.

HTML Bu yaklaşımla

<span ng-repeat="item in items"> 
    <!-- notice we are binding to the "checked" property of each item --> 
    <input type="checkbox" ng-model="item.checked"/>{{$index + 1}} 
</span> 

<input type="button" id="btn" value="deselect 2" ng-click="clear(1)" /> 

<p>With the filter</p> 
<ul ng-repeat="item in items | filter:isSelected(item)"> 
    <li>{{ item.name }}</li> 
    <li>{{ item.desc }}</li> 
</ul> 

<p>With a getter that does the filtering</p> 
<ul ng-repeat="item in getSelectedItems()"> 
    <li>{{ item.name }}</li> 
    <li>{{ item.desc }}</li> 
</ul> 

Kontrolör

 app.controller('MainCtrl', function($scope) { 
     $scope.items = [ 
      { 
       name: 'item1', 
       desc: 'desc1' 
      }, 
      { 
       name: 'item2', 
       desc: 'desc2' 
      } 
     ]; 

     $scope.selectedItems = []; 

     //use this as a filter 
     $scope.isSelected = function() { 
      return function(item) { 
       return item.checked; 
      } 
     }; 

     //clears one of the selections 
     $scope.clear = function(index) { 
      $scope.items[index].checked = false; 
     }; 

     //use this to get just the selected items 
     $scope.getSelectedItems = function() { 
      return $scope.items.filter(function(item) { 
       return item.checked; 
      }); 
     }; 


    }); 

, programlı/ekleyebilir, kontrol özelliğini onay kutularını çıkarıp güncellemek ve UI otomatik olarak güncellenir olabilir.

Plunker: Yani ng-click kullanarak bir yana, benim yorumunu kapalı tertipleyerek http://plnkr.co/edit/8bwmg9joQdO6lkUnLhvv?p=preview