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和缺陷值。

提前谢谢

Answer 1

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

如果将input元素绑定到ng-model指令而不是checked属性，则它可以工作，因为ng-model指令执行双向数据绑定，Angular dirty检查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>

angularjs复选框显示/隐藏框

1 个答案: