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複選框過濾器指令

回答

相關問題