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

Try ng-show="product.ischeck" on <div class="mybox">

Adnan Umer
– Adnan Umer

2016-08-29 08:39:52 +00:00
Commented Aug 29, 2016 at 8:39 — Adnan Umer
– Adnan Umer, Commented Aug 29, 2016 at 8:39

Abdul Mateen Mohammed · Accepted Answer · 2016-08-29 08:48:34Z

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>

edited Aug 29, 2016 at 8:48

answered Aug 29, 2016 at 8:42

Abdul Mateen Mohammed

1,8841 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thomas Over a year ago

Thanks a lot. I am new on angular js. not easy to get all the think at once

Abdul Mateen Mohammed Over a year ago

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted. You can go through the Stack Overflow tour here stackoverflow.com/tour to know how Stack Overflow works, you could check this help too stackoverflow.com/help/someone-answers :)

Collectives™ on Stack Overflow

angularjs checkboxes show / hide box

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related