創建動態倍數下拉選擇

Question

我正在從數據庫中獲取具有類別屬性的對象列表，例如文章，並且我將向我的angularjs應用程序添加過濾功能，在其中我可以根據子類別選擇多個文章，並按類別分組

我正在嘗試在html中執行以下操作：

<select multiple >
  <option value="" disabled selected>Choose your option</option>
  <optgroup ng-repeat="category in categories" label="{{category.category}}"> 
    <option ng-repeat="subcategory in category.subcategories" value="{{subcategory}}">{{subcategory}}</option>
  </optgroup>
</select>

但是類別和子類別可以是多種多樣的，我不想在我的應用程序上對其進行硬編碼，而是將我從數據庫中檢索到的所有文章中的信息進行分組，因此在我的Controller中，使用了我用來提取所有我有以下文章

function getAllArticles(){
  var promise = article.getAll();
  promise.then(function( articles ){
    $scope.articles = articles.data

    var result = $scope.articles.map(function(a) {return a.category.category;});
    var res = arrayUnique(result);

    for(var i = 0; i < res.length; i++){
      $scope.categories[i] = {'category': res[i] }

      var result2 = $scope.articles.map(function(a) {
        if (a.category.category === res[i]) {
          return a.category.subcategory;
        }
      });
      $scope.categories[i]['subcategories'] 
      $scope.categories[i]['subcategories'] = arrayUnique(result2);
    }        
  });
}

var arrayUnique = function(a) {
  return a.reduce(function(p, c) {
    if (p.indexOf(c) < 0 && c != undefined) p.push(c);
      return p;
  }, []);
};

在某種程度上，我正在使用map / reduce來獲取類別和子類別，但是我的問題是，在所有這些內容中，ng-repeat都沒有顯示任何內容，就像$ scope.categories一樣。為空，即使我們在console.log中也得到以下結果：

{ 0: {category: "category1",
      subcategories: [{subcategory: "sub1"},{subcategory: "sub2"}]
     }, 
  1: {category: "category2",
      subcategories: [{subcategory: "sub1"},{subcategory: "sub2"}]
     }, ...
}

編輯：

當我執行以下操作時：

<div ng-repeat="category in categories">
  {{category.category}}
  <div ng-repeat="subcategory in category.subcategories">{{subcategory}}</div>
</div>

它會按照類別和子類別的列表進行打印，主要區別是我使用的是<div>而不是<optgroup> <option>

Answer 1

如果您的console.log是准確的，那么您正在對對象而不是數組使用ng-repeat。 這是可行的，但需要特殊的語法，例如：

<div ng-repeat="(key, value) in myObj"> ... </div> 

您可以在此處找到文檔。

否則，請嘗試將結果轉換為數組，然后再在ng-repeat中使用它們。

附帶說明一下，angular為ng-select提供了ng-options指令。 這樣，您可以為其分配數據模型，而無需對模板進行硬編碼。

Answer 2

問題在於materializecss select。 它在更新$scope.categories之前實例化，該$scope.categories空

解決方案可以是

$(document).ready(function() {

  $('select').material_select();
  $('input.select-dropdown').click(function(e){
    $('select').material_select();
  });
});

解決了問題，但這是一個可怕的駭客，但是我將轉向超時解決方案或在更新$scope.categories之后實例化