I require a bit of help with AngularJS syntax to make a dynamic checkbox selector bind to object properties.
Problem:
<div ng-repeat="level in vm.Settings.LevelList">
<input type="checkbox" ng-model="vm.Item.Level." ng-change="CheckLevel()">
<div>
Where items' level is just a key-value-pair object. It's important to note that not all levels may be applicable to an item but each item will have an object with all possible options as follows:
Item.Level = {
L1: false,
L2: true,
L3: false,
L4: false,
}
My vm.Settings.LevelList
changes depending on the page that is loaded. To make things simple let's assume we have the following array to work with:
Settings.LevelList = [
{ Name: 'Level 2', ShartName: 'L2', SortOrder: 2, },
{ Name: 'Level 3', ShartName: 'L3', SortOrder: 3, },
]
My template spells out all possible options where I am using ng-if
to hide ckeckboxes that are not relevant. While I am not expecting for levels to change often at the same time I do not want to spend my time tracking every template where level checkboxes apear. So, the following is what I currently have:
<div ng-if="conditon to hide L1"><input type="checkbox" ng-model="vm.Item.Level.L1" ng-change="CheckLevel()"> Level 1</div>
<div ng-if="conditon to hide L2"><input type="checkbox" ng-model="vm.Item.Level.L2" ng-change="CheckLevel()"> Level 2</div>
<div ng=if="conditon to hide L3"><input type="checkbox" ng-model="vm.Item.Level.L3" ng-change="CheckLevel()"> Level 3</div>
<div ng-if="conditon to hide L4"><input type="checkbox" ng-model="vm.Item.Level.L4" ng-change="CheckLevel()"> Level 4</div>
But what I want should be of the following form:
<div><input type="checkbox" ng-model="vm.Item.Level.L2" ng-change="CheckLevel()"> </div>
<div><input type="checkbox" ng-model="vm.Item.Level.L3" ng-change="CheckLevel()"> </div>
So, the repeater should only need to produce two checkbox options as per Settings.LevelList
. Provided the model binds correctly checkbox for Level 2
should be checked (Item.Level.L2 = true).
Just in case someone wonders CheckLevel()
just makes sure that at least one level option is selected. Also, I am working with AngularJS v1.5.8.
Aucun commentaire:
Enregistrer un commentaire