问题:
It's very simple. I have 2 selects. When the user selects the category, it will appear another select with a subcategory.
The problem is that subcategory select is always...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
It's very simple. I have 2 selects. When the user selects the category, it will appear another select with a subcategory.
The problem is that subcategory select is always empty.
Category 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 </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 </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>
Any idea why this is happening? Somehow I can't read the subcategories array from the selected category
EDIT: If I put <span>{{vm.selectedCategory}}</span>
in my html, it shows the json above. but if I put <span>{{vm.selectedCategory.subcategories}}</span>
it's null
Another edit: Even <span>{{vm.selectedCategory.doctype}}</span>
is null
回答1:
It is because your selected value is not evaluated as object but as string. To handle this issue you can:
You can either convert selected string to object with ng-change directive on first select and the following function
$scope.convert = function(){
$scope.vm.selectedCategory = angular.fromJson($scope.vm.selectedCategory)
}
or use ng-options
<select name="mySelect" id="mySelect" ng-options="category.description for category in data" ng-model="vm.selectedCategory">
</select>
Demo
回答2:
To make a working demo, had to simplify vm.[namedVariables]
into simple variables: kindly check below
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 </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 </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>
回答3:
Instead of using the value
attribute with interpolation, use the ng-value
directive:
<div class="row">
<div class="col-sm-12">
<!-- Categories -->
<label for="category-select"><b>Category </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>
The double curly bracket interpolation directive attempts to convert the category
value to a string. This does not work well when the category
value is an object.
For more information, see AngularJS ng-value Directive API Reference.
It says [Object Object] when I do <span>{{vm.selectedCategory}}</span>
and i can't read the subcategories
Pipe the vm.selectedCategory
into the json filter:
<span>{{ vm.selectedCategory | json }}</span>
This allows you to convert a JavaScript object into JSON string.
This filter is mostly useful for debugging. When using the double curly notation the binding is automatically converted to JSON.
For more information, see AngularJS json Filter API Reference.