AngularJS复选框过滤器指令

我有一个AngularJS指令，允许用户从列表中选择一个值进行过滤。很简单的概念，它在这里表示：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

第二次火灾后，它检查所有的箱子...任何想法？

来源

2014-02-27 amcdnl

，我用抢根据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"

来源

2014-02-27 15:33:20 amcdnl

继承人一个很好的指令，内置支持复选框：http://vitalets.github.io/checklist-model/ – amcdnl

也许它的局部变量不会被重新分配给视图中使用的范围属性的属性。由于您的值不存在且未找到，因此将检查该框。

$scope.tempFilter.value = values

来源

2014-02-27 01:04:51 Preom

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

的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

来源

2014-02-27 01:34:39

欣赏的努力，但是，我的数据结构不允许它来构建这个样子，这是一个非常漂亮和干净的解决方案，但。谢谢！ – amcdnl

AngularJS复选框过滤器指令

回答

相关问题