JSFiddle - React, Tailwind, and code Playground

jquery dropdown (bootstrap style) in angular directive accepts function defining option text

by wittwerj

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.js"></script>
<link rel="stylesheet" href="http://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-controller="appcontrol">
    <input ng-model="setvalue" style="width:25px;" />
    <button ng-click="loadData(setvalue)">Set Value</button>
    <button ng-click="mode.readonly = !mode.readonly">Toggle Update</button>
    <dropdown ng-disabled="mode.readonly"
        ng-model='data.BorrowerMaritalStatusType' 
        display='Key'
        options='enumerations.BorrowerMaritalStatusType'
        option-text='keyAndValue'>
    </dropdown>
    <pre>BorrowerMaritalStatusType: {{data.BorrowerMaritalStatusType}}</pre>
    <dropdown ng-disabled="mode.readonly"
        ng-model='data.CoBorrowerMaritalStatusType' 
        display='Value'
        options='enumerations.BorrowerMaritalStatusType'
        option-text='valueOnly'>
    </dropdown>
    <pre>CoBorrowerMaritalStatusType: {{data.CoBorrowerMaritalStatusType}}</pre>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('appcontrol', function($scope) {
    $scope.loadData = function(val) {
        $scope.data.BorrowerMaritalStatusType = val;
        $scope.data.CoBorrowerMaritalStatusType = val;
    };
    $scope.mode = {
        readonly: true
    };
    $scope.data = {};
    $scope.data.BorrowerMaritalStatusType = 2;
    $scope.data.CoBorrowerMaritalStatusType = 4;
    $scope.keyAndValue = function(option) {
        var text = option.Key + ' ' + option.Value;
        //console.log(text);
        return text;
    };
    $scope.valueOnly = function(option) {
        return option.Value;
    };
    $scope.enumerations = {
        BorrowerMaritalStatusType : [
          {
            "Key": "1",
            "Value": "Married"
          },
          {
            "Key": "2",
            "Value": "NotProvided"
          },
          {
            "Key": "3",
            "Value": "Separated"
          },
          {
            "Key": "4",
            "Value": "Unknown"
          },
          {
            "Key": "5",
            "Value": "Unmarried"
          },
          {
            "Key": "10",
            "Value": "Other"
          }
        ]
    };
});

app.directive('dropdown', function ($filter) {
    return {
        restrict: 'E',
        scope: {
            source: '=ngModel',
            options: '=',
            optionText: '&',
            display: '@',
            style: "@",
            ngDisabled: "=",
            restrict: "@"
        },
        template:
            '<div>' +
            '   <input ng-disabled="ngDisabled" ng-click="triggerdropdown($event)" ng-keydown="keydowndropdown($event)" type="text" style={{style}} />' +
            '   <div class="dropdown dropdown-scroll">' +
            '       <ul class="dropdown-menu">' +
            '           <li ng-repeat="option in options">' +
            '               <a href ="#!" ng-click="choosevalue(option)">{{optionText(option)}}</a>' +
            '  ...