CODEWITHSUNDEEP
javascriptselectknockout.jsshare
MakoBuk
MakoBuk

Reputation: 464

KnockoutJs - shared observable array for more selects

Say that when employer wants to specify employee and amount of premium, he click on button "add employee" and there appear another form with select(employees) and input for amount.

<select>
    <option>John</option>
    <option>George</option>...
</select>

<input type="text" placeholder="Amount"/>

I have one shared ko.observableArray for dynamicaly added select boxes and inputs. It works fine...

There is problem, that employer can select one employee more than once (it is undesirable). I tried to make new array ko.computed, which filtter selected employees out. But always unsuccessfully.

The once selected option should be disabled or shouldn't appear in other selects.

Do anyone already solve it?

Upvotes: 0

Views: 71

Answers (1)

MakoBuk
MakoBuk

Reputation: 464

Ok. I have solved it like taht:

First of all I had to replace my

<selec data-bind="options: employyes">....

by foreach and render my items manually

<select data-bind="value: selectedEmployee, foreach: $root.employees, click: $root.updateEmployees, optionsAfterRender: $root.updateEmployees">
    <option value selected="selected" data-bind="visible: $index === 0">Choose...</option>
    <option data-bind="value: id, text: name, attr: {'disabled': disabled}"></option>
</select>

Then I wrote function which update state of Employees always I click on select... It is going through all employees and check if employee ID is selected in some of form and if it is, disable attribute is seat on true otherwise false.

self.updateEmployees = function() {
        ko.utils.arrayForEach(self.employees(), function (employee) {
            var isEmployeeUsed = false;
            ko.utils.arrayForEach(self.forms(), function (form) {
                console.log(employee.id());
                if (typeof employee !== 'undefined' && typeof form !== 'undefined' && employee.id() === form.selectedEmployee()) {
                    isEmployeeUsed = true;
                }
            });

            employee.disabled(isEmployeeUsed);    
        });

JS Fiddle HERE

Upvotes: 2

Related Questions