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中，在函数I中用来获取我有以下所有文章

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来获取类别和子类别，但我的问题是所有这些，在我的HTML中，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>

您可以找到文档here。

否则，尝试将结果转换为数组，然后在ng-repeat中使用它们。

作为旁注，angular为ng-select提供了ng-options指令。这样，您就可以为其分配数据模型，而不是对模板进行硬编码。

Answer 2

问题在于materializecss选择。它在更新$scope.categories之前进行实例化，这是空的

解决方案可以是

$(document).ready(function() {

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

解决了这个问题，但这是一个可怕的黑客攻击，但我会在更新$scope.categories之后转向超时解决方案或实例化

创建动态多个下拉列表选择

2 个答案: