Angular JS select with manual options

Question

Angular JS select with manual options

We have some drop downs in our app that we can NOT use ng-options with because we need to set the title attribute on the <options> tag itself which is not possible with ng-options.

The reason we need the title is because IE < 9 chops off values that are to long and they are only visible with the title(shows up on hover of the element)

Now, to see the issue I'm having look at the following JS fiddle.

http://jsfiddle.net/nstuart/nF7eJ/ (HTML Bit)

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model="params.value">
        <option value="">Any</option>
        <option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}" ng-selected="{{v.value == params.value}}">{{v.name}}</option>
    </select>
    <p>{{params.value}}</p>
</div>

Ideally the select would have 'test3' selected, but you can see it gets set to an empty option instead. I understand this is from the fact that the value of ng-model is not present in the ng-options, but thats because I have not defined one!

Any ideas on how to get something like this working? Possibly even be able to add title to the options generated by ng-options so we could use that instead?

EDIT

Updated the fiddle at: http://jsfiddle.net/nstuart/nBphn/2/ to as described in the answer below.

javascript
angularjs

Answer 1

Actually, just remove the curly braces from the expression in ng-selected and it will work:

<option ng-repeat="v in options" 
        value="{{v.value}}" 
        title="{{v.name}}" 
        ng-selected="v.value == params.value">{{v.name}}
</option>

fiddle

Answer 2

<option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}"
        ng-selected="checkOption(v.value)">{{v.name}}</option>

$scope.checkOption = function(value){
    return($scope.params.value == value);
}

Fiddle

[UPDATE] forgot to pass value variable. Updated fiddle and answer.

Answer 3

For manual options, you only need to use ng-model directive. This ng-model directive gives two way data binding for the selected option.

jsfiddle: http://jsfiddle.net/rpaul/1p9b5et8/1/

<body ng-app ng-controller="AppCtrl">
<select ng-model="selectedFruit" >
    <option value ='1'> Apple</option>
     <option value ='2'> Orange</option>
</select>
   Selected value is  {{selectedFruit}}
</body>


function AppCtrl($scope) {     

      $scope.selectedFruit = '1';
}

Answer 4

You might also want to take a look at the select2 directive in http://angular-ui.github.com/#directives-select2

Answer 5

In my code, I re-calculate select title on ng-change="changeItem()"

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-options="item.id as item.title for item in items" 
            ng-model="selectedId" ng-change="changeItem()" title="{{myTitle}}">
        <option value="" disabled selected style="display: none;">Select Item</option>                
    </select>
    <div>
        {{selectedId}}        
    </div>
    <div>
        {{myTitle}}        
    </div>
</div>

app.js

angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.items = [{
        id: 1,
        title: "Icebox"
    }, {
        id: 2,
        title: "Summer"
    }, {
        id: 3,
        title: "Milestone"
    }];

    $scope.changeItem = function() {
        $scope.myTitle = undefined;
        for(var i=0; i<$scope.items.length; i++){
            if($scope.items[i].id == $scope.selectedId){
                $scope.myTitle = $scope.items[i].title;    
            }
        }    
    }    
}

Fiddle