CODEWITHSUNDEEP
javascriptangularjsangularjs-directivedropdownbox
STEEL
STEEL

Reputation: 10057

AngularJs Directive for crossbrowser SELECT Dropdown

I'm trying to create below Cross-browser dropdown:

Gyazo

Currently this is my HTML:

var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function($scope) { //temporory stuff

  $scope.investments = [{
    "name": "AARPOperatingFunds"
  }, {
    "name": "SomeBigTitle"
  }, {
    "name": "IhatezIE8"
  }, {
    "name": "ILoveFFDeveLoperEdition"
  }, {
    "name": "GiveMeSomeLove"
  }];
  
  $scope.investment = $scope.investments[0].name;

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myCtrl">

  <span class="dropdown">
      <i ng-bind="investment" class="before"></i>
      <select ng-model="investment">
        <option ng-repeat="ip in investments | orderBy:'name' " ng-value="ip.name">{{ ip.name }}</option>
      </select>
    </span>

</div>

But what I need is, when someone selects the Dropdown, ng-bind will update and also

  1. I do not want to add mg-model each time.
  2. And main thing is if OPTION value is sometime like this "AARPOperatingFunds" it should get displayed as "AARP Operating Funds"

Please guide. Can we create any Directive here for the above purpose.

I need something like this:

<span class="dropdown">
  <i class="before" mySelectDirective></i>
  <select id="investProgram" ng-options="ip for ip in ips | orderBy:'ip' "></select>
</span>

OR this one:

<span class="dropdown mySelectDirective">
</span>

Upvotes: 0

Views: 215

Answers (1)

jraede
jraede

Reputation: 6896

Use ng-options combined with adding a "label" attribute to your array:

$scope.investments = [{
    "name": "AARPOperatingFunds",
    "label":"AARP Operating Funds"
 }, {
    "name": "SomeBigTitle",
    "label":"Some Big Title"
 }];

Then:

<select ng-model="investment" ng-options="opt.name as opt.label for opt in investments"></select>

https://docs.angularjs.org/api/ng/directive/select

Upvotes: 1

Related Questions