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中的select中执行以下操作：

<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

work 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"
      }]
    }];
  });

Answer 2

我认为问题就在这里

 <option value="{{category.subcategory.subcategoryid}}">

子类别是数组，我认为您应该使用新的ng-repeat制作<option>代码列表

AngularJS选择不动态填充

2 个答案: