javascript - AngularJS 选择不动态填充

Question

我有以下 JSON(测试 JSON 是如何从服务器传来的):

$scope.allCategoriesAndSubcategories = {
          "category" : {
              "categoryname" : "pasteleria",
              "subcategory" : [
                  {"subcategoryname" : "pastel tradicional", "subcategoryid" : "1"},
                  {"subcategoryname" : "pastel con fondant", "subcategoryid" : "2"}
              ]
          },
          "category" : {
              "categoryname" : "eventos",
              "subcategory" : [
                  {"subcategoryname" : "boda", "subcategoryid" : "1"},
                  {"subcategoryname" : "cumpleanos", "subcategoryid" : "2"}
              ]
          }
      };

然后在 HTML 中选择我执行以下操作:

<div input-field>
     <select material-select
     ng-model="picture.category1" required>
        <optgroup ng-repeat="category in allCategoriesAndSubcategories"  label="{{category.categoryname}}">
            <option value="{{category.subcategory.subcategoryid}}">{{category.subcategory.subcategoryname}}</option>
        </optgroup>
     </select>
     <label>Categoría #2</label>
</div>

当我 console.log() 时，我得到了实际的对象，所以它不是未定义的，但是选择没有填充。我应该做其他事情来填充它吗？我是 angularJS 的新手，找不到与此类似的示例

Answer 1

如果您希望创建选项列表，则 HTML 无效

<div input-field>
     <select material-select ng-model="picture.category1" required>
        <optgroup ng-repeat="category in allCategoriesAndSubcategories"  label="{{category.categoryname}}">
            <option ng-repeat="subcategory in category.subcategory" value="{{subcategory.subcategoryid}}">{{subcategory.subcategoryname}}</option>
        </optgroup>
     </select>
     <label>Categoría #2</label>
</div>

然后在您选择元素之后，应该填充模型 picture.category1

工作 plunker http://codepen.io/maurycyg/pen/PZpRRy

您的数据也应该采用不同的格式

$scope.allCategoriesAndSubcategories = [{
      "categoryname": "pasteleria",
      "subcategory": [{
        "subcategoryname": "pastel tradicional",
        "subcategoryid": "1"
      }, {
        "subcategoryname": "pastel con fondant",
        "subcategoryid": "2"
      }]
    }, {
      "categoryname": "eventos",
      "subcategory": [{
        "subcategoryname": "boda",
        "subcategoryid": "1"
      }, {
        "subcategoryname": "cumpleanos",
        "subcategoryid": "2"
      }]
    }];
  });