Displaying submatrix in ng-repeat
In my Angular app, I have the following element <select>
populated like this:
Html
<select name="device[ [[$index]] ]" ng-model="selectedModel" ng-change="loadModelImage(selectedModel)">
<option value="">Model</option>
<option ng-repeat="model in manufacturerModels" value="[[model.id]]">[[model.model]]</option>
</select>
Js
$scope.manufacturerModels = $filter('filter')($scope.models, {manufacturer_id: manufacturerId});
The above AngularJS snippet will return a JSON response of the phone models stored in the API. (I would post an example here, but each object is quite long).
In any case, within each "model" there is a sub-array of options - objects containing the colors and memory sizes available for this device.
eg:
{
model: "iPhone 6",
manufacturer: "Apple",
variants: [
{
color: "space grey",
memory: "128GB"
}
{
color: "gold",
memory: "16GB"
}
{
color: "space grey",
memory: "64GB"
}
]
}
purpose
I would like to know if it is possible (and if so, how) to populate the model dropdown with <option>
options in the title. So where is it currently saying [[model.model]]
(.model being the name), I need each option to say something like "iPhone 6 space gray 128GB"
PS. Angular temp interpolation. changed to [[ ]]
because of the same pages using mustachePHP.
source to share
I'm not sure I understand your question, but you can split the models into optgroups and then have a variant for each variant in each model:
<select>
<option value="">Model</option>
<optgroup ng-repeat="model in data" label="{{model.model}}">
<option ng-repeat="variant in model.variants" value="{{model}}">{{ model.model + '-' + variant.color }}</option>
</optgroup>
</select>
Please see this plunkr: http://plnkr.co/edit/rPNaGXEi0m9rvNkzQuBJ?p=preview
Also, you have to flatten your array:
$scope.flatten = function(){
var out = [];
angular.forEach($scope.data, function(d){
angular.forEach(d.variants, function(v){
out.push({model: d.model, variant: v.color})
})
})
return out;
}
And then you can use ngSelect:
<select ng-model="myColor" ng-options="model.variant group by model.model for model in flatten()">
<option value=""> -- select -- </option>
</select>
Here's the updated Plnkr: http://plnkr.co/edit/rPNaGXEi0m9rvNkzQuBJ?p=preview
source to share
This may not be the answer you are looking for, but AngularJS is always pushing you to work with view models, which means models specifically for views.
Your example with models and its nested variants is not the model that is intended for the view you are trying to represent, and so I would suggest creating a new model based on your current model.
This new model will have one entry for each model for each variation and will be flat so that one ng-repeat will iterate over them easily. You can even add instructions to the watch on "modelsModels" so you can be sure that the new model you create for the ng-repeat options is always up to date.
Another option that will work with what you are trying to do is create a simple directive that only copies its inner HTML without its tags, like this:
<noTags>someHtml</noTags> --> someHtml
I'll leave it to you to write this directive as it's pretty simple.
Then, to solve your problem, you just need to write a nested ng-repeat statement, something like this:
<select name="device[ [[$index]] ]" ng-model="selectedModel" ng-change="loadModelImage(selectedModel)">
<option value="">Model</option>
<noTags ng-repeat="model in manufacturerModels">
<option ng-repeat="varient in model.varients" value="[[model.id]]">[[model.model]] [[varient.color]] [[varient.memory]]</option>
</noTags>
</select>
The html provided should just provide a long list of parameter tags that have all the required parameters.
source to share
You need to use the 'ngOptions' directive for this purpose. https://docs.angularjs.org/api/ng/directive/select The directive can accept either an array of options or a hash (object) of options. And omit the "ngRepeat" inside the "option".
source to share