angularjs checkboxes show / hide box

Question

I have some issues to manage checkboxes and "boxes" containers. The idea is to have a list of checkboxes pre-checked. Each checkboxes controls a "box" container, and when check / uncheck the checkbox, it shows / hides the containers.

here some codes

<div class="col-lg-2">
    <div class="btn-group" uib-dropdown>

        <button type="button" class="btn btn-primary" uib-dropdown-toggle>Preferences 
          <span class="caret"></span>
        </button>

        <ul role="menu" uib-dropdown-menu="">
            <li ng-repeat="product in main.products">
                <input class="mycheck" type="checkbox" id="'{{product.id}}'" checked="'{{product.ischeck}}'"> {{product.name}}</li>
        </ul>
    </div>
</div>

and here is the code for the container boxes

<div class="col-sm-3 connectPanels" ui-sortable="sortableOptions" ng-repeat="product in main.products" id="'{{product.id}}Panel'">
    <div class="mybox">
        <div class="mybox-title">
            <h5>{{product.name}}</h5>
            <div ibox-tools></div>
        </div>
        <div class="mybox-content">
            <h2><img ng-src="{{product.images}}" />
                        {{product.type}}
            </h2>
            <p>{{product.description}}</p>
        </div>
    </div>
</div>

I've tried various ways; ng-click, ng-show, ng-hide and ng-change but each time I am block to manage to get the product Id and ischeck values together.

Thank you in advance

Answer 1

The problem is that you're not using ng-model on the input type checkbox element to do the data-binding so that Angular could figure out what is going on.

If you bind the input element to the ng-model directive instead of the checked attribute it works because the ng-model directive does two-way data binding and Angular dirty checks the previous value of the ng-model and updates the DOM respectively if the value has changed.

Check the below code snippet.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.main = {
     products: [
       { id: 1, ischeck: true, name: 'product 1', type: 'product type 1', description: 'product 1 desc', images: '' },
        { id: 2, ischeck: true, name: 'product 2', type: 'product type 2', description: 'product 2 desc', images: '' },
        { id: 3, ischeck: true, name: 'product 3', type: 'product type 3', description: 'product 3 desc', images: '' }
      ]
    };
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div class="col-lg-2">
      <div class="btn-group" uib-dropdown>
        <button type="button" class="btn btn-primary" uib-dropdown-toggle>Preferences 
          <span class="caret"></span>
        </button>

        <ul role="menu" uib-dropdown-menu="">
          <li ng-repeat="product in ctrl.main.products">
            <input class="mycheck" type="checkbox" id="'{{product.id}}'" ng-model="product.ischeck"/>
            {{product.name}}
          </li>
        </ul>
        
        <div class="col-sm-3 connectPanels" 
        ui-sortable="sortableOptions" 
        ng-repeat="product in ctrl.main.products" id="'{{product.id}}Panel'" ng-show="product.ischeck">
          <div class="mybox">
            <div class="mybox-title">
              <h5>{{product.name}}</h5>
              <div ibox-tools></div>
            </div>
            <div class="mybox-content">
              <h2>
                <img ng-src="{{product.images}}" />
                {{product.type}}
              </h2>
              <p>{{product.description}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>