mardi 28 février 2017

Dynamic ng-model binding to object properties inside ng-repeater

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