Picture this scenario: a collection of different wines:
[
{
"name":"wine A",
"category":[
"red",
"merlot"
]
},
{
"name":"wine B",
"category":[
"white",
"chardonnay"
]
},
{
"name":"wine C",
"category":[
"white",
"chardonnay",
"red",
"merlot"
]
}
]
I am tasked with creating a filtering/grouping feature using AngularJS. For example, if a user selects "chardonnay", the filtered results should display:
Results: wine B, wine C
Although I have a functioning example, there is a need to review the data structure of that example. It does not define arrays within the object items. What adjustments should be made in the controller to align it with the above (array) structure?
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.wines = [
{
name: "Wine A",
category: "red"
},
...
});
app.filter("capitalizeFirst", function() {
return function(str) {
str = str || "";
return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase();
};
});<script src... angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="(prop, ignoredValue) in wines[0]" ng-init="filter[prop]={}">
<b>{{prop | capitalizeFirst}}:</b>
...
</div>