Angular JS dropdown with custom options

Question

Angular JS dropdown with custom options

In our application, we have some dropdowns that cannot utilize the ng-options directive. This is because we need to set the title attribute directly on the <options> tag, which is not supported by ng-options.

The reason behind needing the title attribute is due to Internet Explorer versions older than 9 cutting off values that are too long. These values are only visible when the title attribute is present (showing up on hover of the element).

To understand the issue better, take a look at the following JSFiddle:

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>

Currently, the select should have 'test3' preselected, but it defaults to an empty option instead. This occurs because the value of ng-model does not match any values in the ng-options list.

Any suggestions on how to resolve this issue? Is there a way to add titles to options generated by ng-options or any other solution available?

EDIT

I have updated the fiddle at: http://jsfiddle.net/nstuart/nBphn/2/ based on the feedback provided in the answer below.

javascript angularjs

Answer 1

Answer №1

Simply eliminate the curly brackets from the ng-selected expression to make it function properly:

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

View fiddle here

Answer 2

Simply eliminate the curly brackets from the ng-selected expression to make it function properly:

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

View fiddle here

Answer 3

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);
}

Check out this Fiddle for more details!

[UPDATE] I initially forgot to pass the 'value' variable, but it has been updated now in the fiddle and this answer.

Answer 4

<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);
}

Check out this Fiddle for more details!

[UPDATE] I initially forgot to pass the 'value' variable, but it has been updated now in the fiddle and this answer.

Answer 5

Answer №3

When using manual options, all you have to do is utilize the ng-model directive. This particular directive facilitates two-way data binding for the chosen option.

Check out the example on 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>
   The selected value is  {{selectedFruit}}
</body>


function AppCtrl($scope) {     

      $scope.selectedFruit = '1';
}

Answer 6

When using manual options, all you have to do is utilize the ng-model directive. This particular directive facilitates two-way data binding for the chosen option.

Check out the example on 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>
   The selected value is  {{selectedFruit}}
</body>


function AppCtrl($scope) {     

      $scope.selectedFruit = '1';
}

Answer 7

Answer №4

Consider exploring the select2 directive on

Answer 8

Consider exploring the select2 directive on

Answer 9

Answer №5

Within my coding, I recalibrate the chosen title whenever there is a change using ng-change="changeItem()"

CODE

<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;">Choose an Item</option>                
    </select>
    <div>
        {{selectedId}}        
    </div>
    <div>
        {{myTitle}}        
    </div>
</div>

JAVASCRIPT FILE

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

function MyCtrl($scope) {

    $scope.items = [{
        id: 1,
        title: "Freezer"
    }, {
        id: 2,
        title: "Warmth"
    }, {
        id: 3,
        title: "Achievement"
    }];

    $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;    
            }
        }    
    }    
}

Take a look at this Fiddle example.

Answer 10

Within my coding, I recalibrate the chosen title whenever there is a change using ng-change="changeItem()"

CODE

<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;">Choose an Item</option>                
    </select>
    <div>
        {{selectedId}}        
    </div>
    <div>
        {{myTitle}}        
    </div>
</div>

JAVASCRIPT FILE

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

function MyCtrl($scope) {

    $scope.items = [{
        id: 1,
        title: "Freezer"
    }, {
        id: 2,
        title: "Warmth"
    }, {
        id: 3,
        title: "Achievement"
    }];

    $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;    
            }
        }    
    }    
}

Take a look at this Fiddle example.

Angular JS dropdown with custom options

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Challenges regarding the CSS styling of the ui bootstrap modal and its compatibility with

The access-control-allow-origin header is failing to receive updates

Establishing the types of object properties prior to performing a destructuring assignment

"Refreshing the page is the only way to get the JavaScript image

Encountering a reference error while attempting to troubleshoot streamline.js generated JavaScript code

How can an Angular directive dynamically update template fields with the latest model values from the controller?

implementing CORS on an Express server for a specific domain

Develop an ng-table that includes a dropdown menu allowing users to select the desired amount

Development with Node JS, express, Mongoose, and intricate nested queries

Having trouble getting Three.js JSON models to cast shadows properly?

The phenomenon of componentDidMount being triggered before the DOM is fully mounted arises when utilizing createPortal in React

Blog Writer: Picture quality compromised when adjusting size

Discover the shortest path on Google Maps and customize your route using a specific address or latitude/longitude coordinates. Choose between the default current location marker or customize one to fit your needs

What is the correct way to access an element with spaces in handlebars while working with node.js?

Concealing a button within a specific interface

Exporting ExpressJS from a TypeScript wrapper in NodeJS

Having trouble loading popper.js using Laravel mix and webpack

How can I implement a "remember me" feature on login using Firebase in the routes.js file?

AngularJS is throwing a RangeError, indicating that the time value is invalid when calling Date.toISOString

To combine arrays A and B within a React useState object, simply pass them as arguments when initializing the state