採用NG-重複

JSON的結構創建複選框電網，採用NG-重複

[ 
    { 
     "name": "module1", 
     "categories": [ 
      { 
       "name": "cat1" 
      }, 
      { 
       "name": "cat4" 
      } 
     ] 
    }, 
    { 
     "name": "module2", 
     "categories": [ 
      { 
       "name": "cat3" 
      }, 
      { 
       "name": "cat4" 
      } 
     ] 
    }, 
    { 
     "name": "module3", 
     "categories": [ 
      { 
       "name": "cat1" 
      }, 
      { 
       "name": "cat2" 
      }, 
      { 
       "name": "cat4" 
      } 
     ] 
    } 
]

使用該JSON結構，我需要如下顯示覆選框的網格，

上的點擊任何複選框，我都應該能夠提醒相應的類別&模塊名稱。如果每個模塊都有四個類別，那麼我可以很容易地使用嵌套的ng-repeat並顯示結構（您可以檢查它here。）。但是在這裏，每個模塊的類別數量都不相同。你能否建議一種實現這種功能的方法？

需要找到類別的數量，並在正確的地方在表格中顯示爲標題
顯示覆選框正是

來源

2015-09-04 DRB

我認爲要做到這一點的最好辦法是使用的用戶界面，網格或任何類型的網格;） – Radu

@Radu，UI格犯規支持火狐<40或鉻<44。並且據我所知，沒有角度的網格api支持這種行爲，其中列的每一行的列數不同：（ – DRB

我想到了代碼需要花費一些時間，但是解決方案是這樣想的，你可以得到如果你不能首先分類，那麼你會顯示一個包含類別的行，接下來你需要重複一遍，並且使用bootstrap你可以用cols來劃分屏幕，這樣你就可以使用ng-hide。數據是爲該模塊的cateogiry呈現的。 – Radu

它可以在有NG重複迭代函數的結果 - 與示波器中的陣列字段相反 - 如下所示：

<tr ng-repeat="module in getAllModules()"> 
    <td ng-repeat="cat in getAllCategories()"> 
    <!-- display checkbox here if required --> 
    </td> 
</tr>

我認爲應該清楚如何實現這兩種方法。但是，您必須考慮所涉及的性能開銷，因爲整套模塊和類別都會一遍又一遍地計算。

來源

2015-09-04 08:32:22 lex82

我認爲lex答案是正確的。如果我理解他的解決方案，getAllCategories方法是一個有趣的部分。它必須返回所有類別，而getAllModules仍然可以返回模塊Array。

<tr ng-repeat="module in modules"> 
     <td ng-repeat="cat in getAllCategories()"> 
     <input type="check" ng-if="module.containsCat(cat)"> 
     </td> 
    </tr>

與containsCat方法是類似

$scope.containsCat = function(module, cat){ 
    for each(var moduleCat in module.categories){ 
     if(moduleCat.name === cat) return true; 
    } 
    return false; 
}

來源

2015-09-04 08:49:04

回答

相關問題