Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
How to find actual user's change vs. just navigation?
Message
 
General information
Forum:
Javascript
Category:
Other
Miscellaneous
Thread ID:
01625668
Message ID:
01625687
Views:
36
I think I figured 2 solutions (although on my first try the first solution didn't work, so I already resorted to the second solution).

My second solution is:
var directive = {
            controller: ['$scope', '$timeout', function ($scope, $timeout) {
                $scope.upDisabled = true;
                $scope.downDisabled = true;
                $scope.assigned = null;
                $timeout(function () {
                    $scope.form.assignedList.$pristine = false;
                });
and a change in the template for the directive as well:
<div>
                <select class="form-control select-list"
                        ng-change="onChanged(assigned)" 
                        multiple
                        ng-model="assigned"
                        name="assignedList"
                        ng-options="assignedItem.descrip for assignedItem in assignedItems| orderBy: 'SortOrder' | filter: filterCriteria"
                        ></select>
            </div>
(just adding names for the lists, originally they didn't have name attribute).

This is based on http://stackoverflow.com/questions/17089090/prevent-input-from-setting-form-dirty-angularjs and the last answer in that thread.

My original solution was adding the directive noDirtyCheck to that list in the template (no changes in the directive itself). For some reason when I first tried it, my forms didn't display the mover at all.

I guess I'll stick with that second solution unless you're seeing problems with it.

>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
If it's not broken, fix it until it is.


My Blog
Previous
Reply
Map
View

Click here to load this message in the networking platform