0

I'm running my head against the wall here trying to bind a pre-defined select box's selected attribute depending on a property on an object.

What I have is a collection of objects: Items and an Item object has the StatusCode property which is either 0, 1 or 2.

On my markup I have the following:

<div ng-repeat="fb in feedbackItems | orderBy: 'Id'">
    <select>
        <option value="0">Some text</option>
        <option value="1">Some other text</option>
        <option value="2">Text 3</option>
    </select>
</div>

What I need is to check if the StatusCode of my fb object is either 0, 1 or 2 and then set the selected="selected" attribute on the right option.

When the client chooses another option, the fb object should be updated aswell.

My controller looks like this:

app.controller('feedbackController', function($scope, feedbackService, $filter) {
// Fields
var takeCount = 20;
var currentNodeId = $('.current-id').text();

// Constructor for this controller
init();

function init() {
    feedbackService.getFeedbackPaged(currentNodeId, 1, takeCount).then(function(response) {
        $scope.feedbackItems = response.data.Items;
        $scope.CurrentPage = response.data.CurrentPage + 1;
        $scope.TotalPages = response.data.TotalPages;
        $scope.TotalFeedbackItems = response.data.TotalItems;
        $scope.FeedbackCount = response.data.Items.length;
    });
}
});

Is there any way of doing this? :-)

Thanks in advance!

1
  • 2
    Check out ng-options for the angular select directive. Here's the docs. And you need to bind your select to the appropriate model with ng-model - Like ng-model='StatusCode'
    – Jbird
    Commented Sep 12, 2013 at 15:18

1 Answer 1

1

Make sure to put the model on the there. Not sure what your model looks like but based on how I read your question:

<div ng-repeat="fb in feedbackItems | orderBy: 'Id'">
<select data-ng-model="fb.StatusCode"> <!-- here -->
    <option value="0">Some text</option>
    <option value="1">Some other text</option>
    <option value="2">Text 3</option>
</select>

or if feedback items is actually your option list (like jbird said)

<div >
<select data-ng-model="Item.StatusCode" ng-options="fb.id as fb.text for fb in feedbackItems"></select>
</div>
2
  • And, like I mentioned above, you need to use the ng-options directive to create the appropriate values for each option in your model (instead of ng-repeat)
    – Jbird
    Commented Sep 12, 2013 at 15:21
  • Woah! That was way too easy :-) Thank you so much! Commented Sep 12, 2013 at 15:27

Not the answer you're looking for? Browse other questions tagged or ask your own question.