Question

我有一个AngularJS指令，允许用户从列表中选择要过滤的值。这里有一个非常简单的概念：

enter image description here

问题是当我点击其中一个复选框时，他们都选择了意外。我的指令非常简单，所以我不确定为什么会这样。选择和复选框周围的代码如下：

$scope.tempFilter = {
    id: ObjectId(),
    fieldId: $scope.available[0].id,
    filterType: 'contains'
};

$scope.toggleCheck = function (id) {

    var values = $scope.tempFilter.value;
    if (!values || !values.length) {
        values = $scope.tempFilter.value = [];
    }

    var idx = values.indexOf(id);
    if (idx === -1) {
        values.push(id);
    } else {
        values.splice(idx, 1);
    }
};

$scope.valuesListValues = function (id) {
    return $scope.available.find(function (f) {
        return f.id === id;
    }).values;
};

和数据类似：

$scope.available = [{ 
     id: 23, 
     name: 'Store' 
     values: [ 
              { id: 124, name: "Kansas" }, 
              { id: 122, name: "Florida" }, ... ]
}, ...  ]

视图逻辑如下：

<ul class="list-box">
    <li ng-repeat="val in valuesListValues(tempFilter.fieldId)">
        <div class="checkbox">
            <label ng-click="toggleCheck(val.id)">
                <input ng-checked="tempFilter.value.indexOf(val.id) === -1" 
                        type="checkbox"> {{val.name}}
            </label>
        </div>
    </li>
</ul>

首先，它toggleCheck触发两次，但填充正确的数据（第二次给我的代码，但它删除了它）。 enter image description here

第二次火灾后，它会检查所有方框......有什么想法吗？

Answer 1

也许是因为局部变量没有被重新赋值给视图中使用的scope属性的属性。由于您的值不存在且未找到，因此将选中此框。

$scope.tempFilter.value = values

Answer 2

我采用了您所追求的界面概念，并创建了一个更简单的解决方案。它使用在checked的每个项目中找到的available[0].values属性作为复选框模型。列表顶部是一个清除所选项目的按钮。

<强> JavaScript的：

function DataMock($scope) {
    $scope.available = [{ 
        id: 23, 
        name: 'Store',
        values: [{
            id: 124,
            name: "Kansas"
        }, {
            id: 122,
            name: "Florida"
        }]
    }];
    $scope.clearSelection = function() {
        var values = $scope.available[0].values;
        for (var i = 0; i < values.length; i++) {
            values[i].checked = false;
        }
    };
}

<强> HTML：

<body ng-controller="DataMock">
    <ul class="list-box">
        <li>
            <button ng-click="clearSelection()">Clear Selection</button>
        </li>
        <li ng-repeat="val in available[0].values">
            <div class="checkbox">
                <label>
                    <input ng-model="val.checked"
                           type="checkbox" /> {{val.name}}
                </label>
            </div>
        </li>
    </ul>
</body>

Demo on Plunker

Answer 3

我曾经根据id获取值的重复是问题区域。

 <li ng-repeat="val in valuesListValues(tempFilter.fieldId)">

删除它并简单地监听和设置静态变量解决了问题。

 $scope.$watch('tempFilter.fieldId', function () {
     var fId = $scope.tempFilter.fieldId;
     if ($scope.isFieldType(fId, 'valuesList')) {
           $scope.valuesListValues = $scope.valuesListValues(fId);
                }
      }, true);
 });

然后在视图中：

 ng-repeat="value in valuesListValues"

AngularJS复选框过滤器指令

3 个答案: