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)
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.