1

I have a smart table with a column containing Select options (drop-down) based on one object and it's selected option based on a different JSON object.

So I use ng-repeat to repeat all option values and ng-selected with another object that will mark the selected values of all the drop-downs in that column.

Each row is manipulated from a different ng-repeat in the table tr tag.

I also wanted ng-change to fire a function call when it's value is changed. I'm facing problems in achieving this.

Here's a plunker without using smart table (and any other complex structure)

PLUNKER

Method 1:

<tr ng-repeat="objectOneRow in objectOne" >
   <td>
      <select ng-model="objectOneRow.selected" ng-change="optionChanged()">
         <option ng-repeat="optionValue in objectTwo" ng-selected="optionValue==objectOneRow.selected">{{optionValue}}</option>
      </select>
   </td>
</tr>

When I use ng-repeat in the HTML's option tag, with ng-model and ng-change described in it's select tag, an empty undefined option gets inserted as it's first value but ng-change is getting fired when its value is changed.

The ng-selected is not working as expected in the above method. I'm facing a blank option problem (as the ng-model will be undefined at the beginning of the manipulation - similar problem in StackOverflow)

Alternatively when I use ng-options, the ng-change is not getting fired (but ng-selected works fine) as there are two different objects mapped to ng-model and ng-options' repeat section.

Method 2:

<tr ng-repeat="objectOneRow in objectOne" >
   <td>
      <select ng-model="objectOneRow.selected" ng-change="optionChanged()" ng-options="objectOneRow.selected as optionValue for optionValue in objectTwo track by optionValue">
      </select>
   </td>
</tr>

Sample JSON data:

objectTwo = [10,20,30,40,50,60,70,80,90,100];
objectOne = [
    {selected: 20},
    {selected: 10},
    {selected: 40},
    {selected: 10},
    {selected: 20},
    {selected: 20},
    {selected: 20},
    {selected: 20},
    {selected: 20},
    {selected: 20}
];

In Method 1, the ng-selected is not working because of the blank option value.

<option value="? string: ?"></option>

In Method 2 ng-change is not working because ng-model and ng-options are mapped to different objects.

Note: Since the smart table uses index from 0 to page_max for every page, I'm not able to manipulate selected value manually as well.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Prakash M.
  • 479
  • 8
  • 26

0 Answers0