Geek Answers Handbook

Angular JS select using manual options

We have several drop-down lists in our application in which we can NOT use ng-options , because we need to set the title attribute to the <options> tag, which is impossible with ng-options .

The reason we need a headline is because IE <9 discards values ​​that are long, and they are visible only with the heading (displayed when you hover over an item)

Now, to see the problem, I am looking at the following JS script.

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, select will select "test3", but you can see that instead it will be set to an empty parameter. I understand that this is due to the fact that the value of the ng model is missing from ng-options , but this is because I did not define one!

Any ideas on how to make something like this work? Perhaps he can even add a header to the parameters generated by ng-options so that we can use this instead?

EDIT

Updated script: http://jsfiddle.net/nstuart/nBphn/2/ , as described in the answer below.

+6
source share
5 answers

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

+16
source 
 <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 the value variable. Updated fiddle and answer.

+1
source

For manual options you need to use the ng-model directive. This ng-model directive provides 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'; }
+1
source

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

0
source

In my code, I recount the selected header to 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

0
source

More articles:


All Articles