Hi everybody,

This is a tough problem, I think.

We have a DualList directive which is a mover and below the mover there is a text area. Here is the relevant part of the HTML:

<div class="form-group padd form-group-lg">
            <div class="container">
                <data-sm:duallist-directive ng-required="false"
                                            unassigned-items-title="'@String.Format(Labels.availableX, Labels.modifiers)'"
                                            unassigned-items="currentModifierGroup.unassignedItems"
                                            assigned-items-title="'@String.Format(Labels.assignedX, Labels.modifiers)'"
                                            assigned-items="currentModifierGroup.assignedItems"
                                            sortable="false"
                                            selected-item="currentModifierGroup.selectedItem">
                </data-sm:duallist-directive>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2 col-lg-2" title="@Labels.Macros">@Labels.Macros:</label>
            <div class="col-md-8 col-lg-8">
                <textarea class="form-control"
                          rows="5"
                          style="resize: none"
                          ng-model="currentModifierGroup.selectedItem.macro"
                          ng-model-options="{ allowInvalid: true }"></textarea>
            </div>
        </div>

Here is what I think is happening: when I simply navigate between the assigned items (which, in turn, is supposed to update the Macros text area with that item's associated macro), I get the form state dirty. The user didn't change anything, so that $scope.form.dirty state is not really an indicator that something has changed.

The smDualList directive has the following code for the assigned list ng-change:
Template:

 <div>
                <select class="form-control select-list"
                        ng-change="onChanged(assigned)" 
                        multiple
                        ng-model="assigned"
                        ng-options="assignedItem.descrip for assignedItem in assignedItems| orderBy: 'SortOrder' | filter: filterCriteria"
                        ></select>
            </div>

directive controller:

  $scope.onChanged = function (assigned) {
                    $scope.selectedItem = assigned[0];
                }

One possible solution I see is to manually set some flag in each control ng-change method and also add appropriate flag to the directive itself. But that sounds like too much work.

Do you see a better solution for me to see when it was a real change and when it simply was a navigation in the list with no changes?

Thanks in advance.

UPDATE. Actually, it looks like as soon as I just click on the item in the list, it becomes touched and dirty:

<select class="form-control select-list ng-valid ng-dirty ng-valid-parse ng-touched" 
ng-change="onChanged(assigned)" multiple="" ng-model="assigned" 
ng-options="assignedItem.descrip for assignedItem in assignedItems| orderBy: 'SortOrder' | filter: filterCriteria"><option value="0" label="Bonus - Day Visitor [**BONUS**,DAYVISITOR,BONUS]">Bonus - Day Visitor [**BONUS**,DAYVISITOR,BONUS]</option>
<option value="1" label="Creepy Crawlers [EVENTS,ACTIVITIES,CREEPYCRWL]">Creepy Crawlers [EVENTS,ACTIVITIES,CREEPYCRWL]</option>
<option value="2" label="Dinosaur Adventures [EVENTS,ACTIVITIES,DINOADVNTR]">Dinosaur Adventures [EVENTS,ACTIVITIES,DINOADVNTR]</option>
<option value="3" label="Face Painting [EVENTS,ACTIVITIES,FACEPAINT]">Face Painting [EVENTS,ACTIVITIES,FACEPAINT]</option></select>

UPDATE 2. Also asked here http://stackoverflow.com/questions/33002433/angularjs-list-control-how-to-avoid-setting-forms-dirty-flag