基本读取JSON失败

时间 2019-02-21
阅读 74
点赞 0
收藏 0
连接user10996797

很简单。我有两个选择。当用户选择类别时,将显示另一个具有子类别的选择。

问题是子类别select始终为空。

类别JSON(vm.categories):

[  
   {  
      "doctype":"1120",
      "description":"bla bla",
      "subcategories":[  
         {  
            "@id":1,
            "subcategory":"1",
            "description":"New Offer",
            "templates":[  
               {  
                  "template":"12",
                  "description":"asfafasga",
                  "deliveryChannels":[  

                  ]
               }
            ]
         },
         {  
            "@id":2,
            "subcategory":"2",
            "description":"New Offer",
            "templates":[  
               {  
                  "template":"1121",
                  "description":"asfag",
                  "deliveryChannels":[  
                     {  
                        "deliveryType":"4",
                        "description":"Test"
                     }
                  ]
               }
            ]
         }
      ]
   }
]

HTML

<div class="row">
    <div class="col-sm-12">
        <!-- Categories -->
        <label for="category-select"><b>Category&nbsp;</b></label>
        <select name="category-select" ng-model="vm.selectedCategory" required>
            <option value="" disabled>--- Please select a category ---</option> <!-- not selected / blank option -->
            <option value="{{category}}"
                    ng-repeat="category in vm.categories">
             {{category.description}}
            </option>
        </select>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <!-- Sub Categories -->
        <label ng-show="vm.selectedCategory" for="subcategory-select"><b>Sub-Category&nbsp;</b></label>
        <select name="subcategory-select"
                ng-show="vm.selectedCategory"
                ng-model="vm.selectedSubCategory">
            <option value="" disabled>--- Please select a sub-category ---</option> <!-- not selected / blank option -->
            <option value="{{subCategory}}" 
                    ng-repeat="subCategory in vm.selectedCategory.subcategories">
                {{subCategory.description}}
            </option>
        </select>
    </div>
</div>

知道为什么会这样吗?不知何故,我无法从所选类别中读取子类别数组

编辑:如果我<span>{{vm.selectedCategory}}</span>在我的HTML中,它显示了上面的JSON。但是如果我把<span>{{vm.selectedCategory.subcategories}}</span>它是空的

另一个编辑:偶数<span>{{vm.selectedCategory.doctype}}</span>为空

建议答案

而不是使用value带插值的属性,使用ng-value指令:

<div class="row">
    <div class="col-sm-12">
        <!-- Categories -->
        <label for="category-select"><b>Category&nbsp;</b></label>
        <select name="category-select" ng-model="vm.selectedCategory" required>
            <option value="" disabled>--- Please select a category ---</option> <!-- not selected / blank option -->
            ̶<̶o̶p̶t̶i̶o̶n̶ ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶c̶a̶t̶e̶g̶o̶r̶y̶}̶}̶"̶
            <option ng-value="category"
                    ng-repeat="category in vm.categories">
             {{category.description}}
            </option>
        </select>
    </div>
</div>

double curly bracket interpolation指令尝试转换category值为字符串。当category值是一个对象。

有关详细信息,请参阅AngularJS ng-value Directive API Reference.


当我这样做的时候,上面写着<span>{{vm.selectedCategory}}</span>而且我看不到子类别

管道vm.selectedCategory进入json过滤器:

<span>{{ vm.selectedCategory | json }}</span>

这允许您将javascript对象转换为JSON字符串。

此筛选器主要用于调试。使用双卷曲符号时,绑定将自动转换为JSON。

有关详细信息,请参阅AngularJS json Filter API Reference.

👍 0