CODEWITHSUNDEEP
javascriptangularjs
spookybot
spookybot

Reputation: 49

Disable options in NgOptions within an NgRepeat

I'm trying to disabled already selected options within each "section" (reset with each ng-repeat loop), but I cannot figure out how to best address this situation.

I know that I should use 'disabled when' but cannot figure out how to create that (array?) or track when each select options was already chosen (and make it disabled for the other select within that ngRepeat loop. I need to allow the ability to select the same select option in the section "section."

Any advice is much appreciated. Thanks in advance! I learn best by example and hopefully this will be beneficial to others learning AngularJS.

As seen in this plunker: Plunker

I have the following AngularJs markup

<body ng-app="app">
<div ng-controller="main">
  <hr>
  <div ng-repeat="section in sections track by section.sectionid" ng-model="section.sectionid">
    <p>Section</p>
    <div ng-model="typeModel" ng-repeat="type in types | filter:section.sectionid">
      <p>item name</p>
      <select ng-model="itemSelected" ng-options="item.name for item in items track by item.id">

      </select>

    </div>
    <hr>
  </div>

</div>

Upvotes: 2

Views: 222

Answers (1)

Pengyy
Pengyy

Reputation: 38191

you can use disable syntax disable when condition for ng-options, documentation here(quick search by keyword:disable when).

ng-options="item.name disable when item.name==='2' for item in items track by item.itemid"

UPD:

for your situation, you can maintenance an object with keys of sectionid (easy to set and get by sectionid) and for each of the section, dynamically generate disable conditions for each select element.

// object looks like this
$scope.sectionSelectedItem = {
  1: [
    concition1,       // for first select of sectionid(1)
    concition2,        // for second select of sectionid(1)
    ... 
  ],
  2: [
    concition1,       // for first select of sectionid(2)
    concition2,        // for second select of sectionid(2)
    ... 
  ],
  ...
}

and every time you change a section's select element, you can generate condition data for current section by ng-change.

Plunker demo.

Upvotes: 2

Related Questions