Question

我遇到了一个奇怪的问题，即ng-click一直没有触发复选框。我有3个不同的ul，它们都是相同的，但显示不同的数据（即不同的ng重复和不同的ng模型）

当我单击元素项上的复选框时，它应该调用一个函数。

它适用于所有过滤器 - 始终调用该功能。

对于其他2，它有时会起作用，但大多数时候它不适用于隐藏/可见滤波器。有时候，我的意思是我刷新页面然后再试一次，有时随机工作。大多数其他时间都没有调用该函数！

HTML代码是：

<div class="col-md-4" ng-style="{ 'height' : filtersHeight , 'max-height' : filtersHeight }">
    <!--ALL FILTERS-->
    <ul style="padding-left: 0;" ng-style="{ 'height' : filtersHeight , 'max-height' : filtersHeight }" ng-if="search.filters.visible === undefined" ui-sortable ng-model="customScreen.filters" class="list-formbuilder-sortable-columns">
      THIS IS ALL FILTERS
      <li class="list-group-item" ng-repeat="filter in customScreen.filters | filter:search.filters" ng-class="{'active':selectedElement.filters.name === filter.name}" ng-click="selectElement(filter,'filters')">
        {{filter.displayName}}
        <div ng-if="!filter.required" class="pull-right">
          <input  ng-disabled="::!isUserEntitled('EDIT')" type="checkbox" value="" ng-model="filter.visible" ng-change="updateFilterArrays(filter)">
        </div>
      </li>
      search: {{search.filters}}
    </ul>
    <!--VISIBLE FILTERS-->
    <ul ng-style="{ 'height' : filtersHeight , 'max-height' : filtersHeight }" ng-if="search.filters.visible === true" ui-sortable ng-model="visibleFilters" class="list-group formbuilder-sortable-columns">
      THIS IS ONLY VISIBLE FILTERS
      <li class="list-group-item" ng-repeat="filter in visibleFilters | filter:search.filters" ng-class="{'active':selectedElement.filters.name === filter.name}" ng-click="selectElement(filter,'filters')">
        {{filter.displayName}}
        <div ng-if="!filter.required" class="pull-right">
          <input  ng-disabled="::!isUserEntitled('EDIT')" type="checkbox" value="" ng-model="filter.visible" ng-change="updateFilterArrays(filter)">
        </div>
      </li>
      visibleFilters: {{visibleFilters}} <br/>
      search: {{search.filters}}<br/><br/><br/>
      customScreen.filters: {{customScreen.filters}}
    </ul>
    <!--HIDDEN FILTERS-->
    <ul ng-style="{ 'height' : filtersHeight , 'max-height' : filtersHeight }" ng-if="search.filters.visible === false" ui-sortable ng-model="hiddenFilters" class="list-group formbuilder-sortable-columns">
      THIS IS ONLY HIDDEN FILTERS
      <li class="list-group-item" ng-repeat="filter in hiddenFilters | filter:search.filters" ng-class="{'active':selectedElement.filters.name === filter.name}" ng-click="selectElement(filter,'filters')">
        {{filter.displayName}}
        <div ng-if="!filter.required" class="pull-right">
          <input  ng-disabled="::!isUserEntitled('EDIT')" type="checkbox" value="" ng-model="filter.visible" ng-change="updateFilterArrays(filter)">
        </div>
      </li>
      hiddenFilters: {{hiddenFilters}} <br/>
      search: {{search.filters}}<br/><br/><br/>
      customScreen.filters: {{customScreen.filters}}

    </ul>
  </div>

注意我有另一个复选框也是相同的（行中有一个，另一个面板中有一个）

    <div class="row">
      <div class="checkbox col-md-12" style="margin-left: 15px;">
        <label>
          <input ng-disabled="::!isUserEntitled('EDIT')" type="checkbox" ng-model="selectedElement.filters.visible" ng-disabled="selectedElement.filters.required" ng-change="updateFilterArrays(selectedElement.filters)"/> Show Filter
        </label>
      </div>
    </div>

同样，这个人总是被召唤。

解决方案是使用ng-change代替，但我想知道是否有人可以告诉我为什么ng-click on复选框似乎总是不能解决上述情况呢？

Answer 1

在您的示例中，您有2x ng-disabled
在复选框上仅使用ng-model =“”
在过滤器更改后使用观察器触发某些功能

$scope.$watch('selectedElement.filters', function(newValue) {
    // do some stuff with selectedElement.filters via "newValue" object/array
    // angular.forEach(newValue, function(value,key) {......}); or so...
}, true); // TRUE for object equality check, refer scope.$watch reference

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

ng-click不会一直触发复选框

1 个答案: