CODEWITHSUNDEEP
angularjsdrop-down-menuangularjs-ng-repeat
DaveC426913
DaveC426913

Reputation: 2046

disabling options in array of select using angular

I have an ng-repeat that creates an array of select elements. (The selects allow the configuration of columns in a table of data: 'name', 'address', 'phone', etc.)

No two columns can use the same data.

So, if 'name' is selected for column one, then name is disabled in the selects of all other columns. so:

col1 options       col2  options   col3  options  etc.
-name             -name            -name
-address          -address         -address
-phone            -phone           -phone

becomes

col1              col2  options   col3  options  etc.
-name SELECTED    -name DISABLED  -name DISABLED
                  -address        -address 
                  -phone          -phone

You get the idea.

This is where I am so far. I was trying to set up a test called unique that would return true if the option was not selected anywhere else, but I didn't get far:

<div ng-repeat="column in m.data.Columns track by $index">
    <label for="ColumnTypeCode{{ $index }}" class="control-label">Column #{{ $index + 1 }} Code</label>
    <select 
            id="ColumnTypeCode{{ $index }}" 
            class="form-control" 
            ng-style="{'width': '100%'}" 
            name="ColumnTypeCode{{ $index }}"
            ng-model="column.ColumnCode" 
            required data-ng-change="SetColumnDefaults(column)"
            ng-options="x.ColumnCode as x.ColumnCode disable when !x.ColumnCode.unique for x in m.data.IncidentTypeColumns   | filter:{ ShowOnClaimsGrid: true } "
            unique_item_name="ColumnCode"
            ng-disabled="column.Mandatory"></select>
</div>

Is there a way that angular's 2-way binding can tell if a given selection is in a model, and disable that option in all other selects?

Just sptiballin' here:

I could put disable when x.ColumnCode.takenAlready and then set takenAlready to true. I guess I need a function to do that.

ng-change="setOptionTaken(x)";

$scope setOptionTaken = function(column) {
        column.takenAlready = column.ColumnCode.length;
    }
}

Hm. No. I need an array of takenAlready types that I can iterate through.

Upvotes: 0

Views: 263

Answers (1)

Jack Parkinson
Jack Parkinson

Reputation: 711

One approach could be to add an ng-click listener on the <select> element which binds to a function in the controller, which you can use to check the slected value corresponding to the column id. With this knowledge (that is, knowing what label is selected and which column it is) you can manually disable the option in the other two selections.

Explaining it, it feels somewhat clunky but it would work in a pinch I think.

Upvotes: 0

Related Questions