チェックしたアイテムのみを表示する

Question

チェックボックスが表示されたページがあり、確認の際にユーザーがチェックしたアイテムを再表示しようとしています。

これは起こりますが、アイテムが選択されていないと、バスケットから削除されません。手伝ってくれますか？

<table class="products-table-class"> 

      <tr> 
       <th>News</th> 
      </tr> 
      <tr data-ng-repeat="product in products | filter:{  category: 'News' }" > 


       <td>{{ product.product }}</td> 
       <td><input type="checkbox" ng-model="ids[product.product]"></td> 
      </tr> 



</table> 
<div class="featured-info"> 
     <h3>Basket</h3> 

     <ul> 
      <li ng-repeat="(key, value) in ids ">{{key}}</li> 
     </ul> 
    </div> 

Answer 1

あなたのIDオブジェクトに問題があると思います。ユーザーがチェックボックスをオフにしても、オブジェクトからオブジェクトが削除されることはありません。単純に値をtrueまたはfalseに変更します。

{ 
    '123' : true, 
    '1234' : false 
} 

したがって、この製品はバスケットから取り外されません。 ng-repeatにng-ifを追加して、値がtrueであるかどうかを確認できます。

<li ng-repeat="(key, value) in ids " ng-if="value === true">{{key}}</li> 

この値は、ブール値ではなく文字列であるため、このように見える場合があります。私は頭の上を覚えていない。

<li ng-repeat="(key, value) in ids " ng-if="value === 'true'">{{key}}</li> 

また、ここでは角ドキュメントhttps://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D