angularjs - update `acute.select` list after `ac-change`

Question

I am using acute.select in my angularjs project. I have an array:

$scope.users = [];
$scope.acuteusers =[{UserName:"john"},{UserName:"joe"},{UserName:"mary"}];

        $scope.stateSelected = function(state){
            console.log(state);
            for (var i = 0; i < $scope.acuteusers.length; i++) {
                if (state.UserName == $scope.acuteusers[i].UserName) {
                    $scope.acuteusers.splice(i,1);
                };
            };
            console.log($scope.acuteusers);
        }

and html:

<select class="ac-select stateList" ac-model="users" ac-options="s.UserName for s in acuteusers" 
        ac-settings="{ comboMode: true, loadOnOpen: true, minWidth: '470px' }" ac-change="stateSelected(value)" >
      </select>

I want to take out the element from acute.select dropdown list everything an element is selected. But somehow it will remain as initial states(no element is deleted) even the console.log show it already taken out. How can I resolve that?

it's may be problem in your `ac-` . add a $timeout during splice sometimes it's take time to trigger `$digest`. — Anik Islam Abhi, Dec 30 '15 at 05:10
i think splice should be like $scope.acuteusers.splice(i,1); — NiranjanK, Dec 30 '15 at 05:11
Never modify the array while iterating over it, it is an anti-pattern. If you have to remove elements from the array while iterating over it, do it backwards (start the counter with `array.len` and decrement). — Paulo Scardine, Dec 30 '15 at 06:12
@AnikIslamAbhi I added `$timeout` and it still the same. It seems like `acute.select` have a set of array in its own scope. — sooon, Dec 30 '15 at 09:51

score 0 · Answer 1 · edited May 23 '17 at 10:28

After much reading about Isolated Scope for directives( link1, link2), I decided to hack the acute.select.js directive.

First I add in a new scope data in acute.select.js:

.directive("acSelect", function($parse, acuteSelectService) {
    var defaultSettings = acuteSelectService.getSettings();
    return {
        restrict: "EAC",
        scope: {
            "acSettings": "@",
            "acOptions": "@",
            "model": "=acModel",
            "acChange": "&",
            "keyField": "@acKey",
            "acRefresh": "=",///I believe you can use this, but no documentation at all.
            "acFocusWhen": "=",
            "id": "@",
            data:"=acuteOptions"///newly added by me.
        },
replace: true,
        templateUrl: defaultSettings.templatePath + "acute.select.htm",
        link: function(scope, element, attrs) {
            scope.initialise();

            ///**Then I added in $watchCollection to watch the `data` changes.
            scope.$watchCollection('data', function(newVals, oldVals) {
            ///**I found out scope.allItems is the array to build and display the list. 
///however it must follow {text,value,index} object format. So I reformat it that way.
            scope.allItems = [];
            for (var i = 0; i < newVals.length; i++) {
          scope.allItems.push({text:newVals[i].UserName,value:newVals[i],index:i});
            };
            }, true);
        },

in html, add in acute-options:

<select class="ac-select stateList" ac-model="users" acute-options="acuteusers" ac-options="s.UserName for s in acuteusers" 
        ac-settings="{ comboMode: true, loadOnOpen: true, minWidth: '470px' }" ac-change="stateSelected(value)" >
      </select>

Now whenever $scope.acuteuser changes, it will change the dropdown list.

I still believe acRefresh can do the job, but I am just can not figure out how. It will be nice if someone can share a more robust solution.

angularjs - update `acute.select` list after `ac-change`

1 Answers1