I am facing an issue with handling select boxes within an ng-repeat loop in my AngularJS application. Each object has one or more select boxes, and the user needs to select 3 priorities from these boxes and save them by clicking a button. In the save function, I need to access both the object's id to which the select box belongs and the selected value.
Below is the current code snippet with my concerns and queries highlighted in the comments:
HTML
<div ng-repeat="object in objects">
<div>
<md-input-container>
<md-select ng-model="selectedPriority" placeholder="Priority">
<md-option ng-value="{{ priority.name }}+{{ object.id }}" ng-repeat="priority in priorities">{{ priority.name }}</md-option> <!-- I am facing an error while setting ng-value. How can I resolve this?-->
</md-select>
</md-input-container><br>
{{ object.id}}
</div>
</div>
<md-button ng-click="save()">Save</md-button>
Controller
$scope.save = function () {
console.log($scope.selectedPriority); // I expect to retrieve all object ids with their selected values, but it shows undefined
}
@Sajeetharan: The object JSON is structured as follows:
JSON
[{
"date":"2017-01-21T18:20:00.873Z",
"duration":120,
"location":"Test",
"passed":false,
"id":"58838763019ac0479455bbc0"
},
{
"date":"2017-01-21T15:15:00.420Z",
"duration":10,
"location":"Test",
"passed":false,
"id":"58839ac9019ac0479455bbc1"
}
//...]