json的基本读取失败

Question

这很简单。我有2个选择。当用户选择类别时，会出现另一个带有子类别的选择。

问题是子类别选择总是空的。

类别 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> 为空

Answer 1

这是因为您选择的值不是作为对象而是作为字符串计算的。要处理此问题，您可以：

您可以在第一次选择时使用 ng-change 指令和以下函数将选定的字符串转换为对象

$scope.convert = function(){
    $scope.vm.selectedCategory = angular.fromJson($scope.vm.selectedCategory)
}

或使用 ng-options

<select name="mySelect" id="mySelect" ng-options="category.description for category in data" ng-model="vm.selectedCategory">
</select>

Demo

Answer 2

要制作一个有效的演示，必须将vm.[namedVariables] 简化为简单的变量：请在下方查看

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.selectedCategory = '';

  $scope.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 Offer2",
        "templates": [{
          "template": "1121",
          "description": "asfag",
          "deliveryChannels": [{
            "deliveryType": "4",
            "description": "Test"
          }]
        }]
      }
    ]
  }];

  /*
  for(var i=0; i<$scope.profiles.length; i++){
    console.log($scope.profiles[0].TravelerExtended);
    console.log($scope.profiles[0].TravelerExtended.ExtendedInt_1);
  }
  */

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <div ng-repeat='item in categories'>
    {{item.description}}
    <div ng-repeat='subC in item.subcategories'>
      {{subC.subcategory}} - {{subC.description}}
    </div>
  </div>

  <hr/>

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


</div>

Answer 3

不要使用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>

双花括号插值指令尝试将category 值转换为字符串。当category 值是一个对象时，这不起作用。

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

---

当我执行<span>{{vm.selectedCategory}}</span> 时显示 [Object Object]，但我无法读取子类别

将vm.selectedCategory 输入到 json 过滤器中：

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

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

此过滤器主要用于调试。使用双花​​括号时，绑定会自动转换为 JSON。

如需了解更多信息，请参阅AngularJS json Filter API Reference。