javascript - angularjs 复选框显示/隐藏框

Question

我在管理复选框和“框”容器时遇到一些问题。这个想法是预先检查一个复选框列表。每个复选框控制一个“盒子”容器，当选中/取消选中复选框时，它会显示/隐藏容器。

这里有一些代码

<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>

这是容器盒的代码

<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>

我尝试过各种方法； ng-click、ng-show、ng-hide 和 ng-change，但每次我都无法设法将产品 ID 和 ischeck 值放在一起。

提前谢谢

Answer 1

问题是您没有在输入类型复选框元素上使用 ng-model 来进行数据绑定(bind)，以便 Angular 可以弄清楚发生了什么。

如果将输入元素绑定(bind)到 ng-model 指令而不是 checked 属性，它会起作用，因为 ng-model 指令执行双向数据绑定(bind)，并且 Angular 脏检查 ng-model 的先前值并更新 DOM如果值已更改，则分别。

检查下面的代码片段。

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>