Angulaire modifiable déroulant - rendre modifiable basée sur la valeur sélectionnée

Voici ma solution. Ceci est basé sur un autre post, mais je ne me souviens plus de la source. Merci à tous ceux qui ont aidé.

Juste ajouter l'attribut editable-dropdown contre la select élément. La valeur de l'attribut doit être l'ID de la input élément.

Style:

.stop-wrap {
    display: inline-block;
}

.select-editable {
    position:relative;
    background-color:white;
    border:solid grey 1px;
    width:120px;
    height:25px;
    vertical-align: middle;
    margin-bottom: 5px;
}
.select-editable select {
    position:absolute;
    top:0px;
    left:0px;
    border:none;
    width:118px;
    margin:0;
}
.select-editable input {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    padding:1px;
    border:none;
}
.select-editable select:focus, .select-editable input:focus {
    outline:none;
}

HTML:

<div class="select-editable stop-wrap">
    <select editable-dropdown="input_elem" id="input_elem_sel" name="input_elem_sel">
          <option value=""></option>
          <option value="Option 1">Option 1</option>
          <option value="Option 2">Option 2</option>
          <option value="Option 3">Option 3</option>
          <option value="Option 4">Option 4</option>
          <option value="Other">Other ...</option>
    </select>
    <input id="input_elem" name="input_elem" ng-model="input_elem" force-model-update>
</div>

JavaScript:

//This uses two fields, SELECT and INPUT. The input element is identfied by the attribute 'editableDropdown'
app.directive('editableDropdown', function (){
return {
link: function (scope, elemSel, attrs) {
//debugger;
var inpElemID = attrs.editableDropdown;
var inpElem;
//The parameter 'elemSel' is the SELECT field
function initInpElem() {
if ($(elemSel).is("select")) {
inpElem = $('#' + inpElemID);
} else {
//This is in case the Dropdown is based on DATALIST which is not yet implemented
//In this case, the input element is actually the same as the dropdown field using DATALIST
inpElem = elemSel;
}
}
function updateEditable(elm) {
initInpElem();
//Copy value from SELECT element to the INPUT Element
//Use NgModelController to copy value in order to trigger validation for 'inpElem'
var selectedValue = $(elm).children("option").filter(":selected").text();
//or var selectedValue = elm.val();
//TODO: will have to add more control here since the SELECT value and text are not the same
//     Might cause some issue while rendering value in PDF.
angular.element(inpElem).controller('ngModel').$setViewValue(elm.val());
angular.element(inpElem).controller('ngModel').$render();
makeEditable(elm);
}
function makeEditable(selElm) {
//debugger;
initInpElem();
if ($(selElm).is("select")) {
if (selElm.val() == "Other") {
$(inpElem).prop("readonly", false);
} else {
$(inpElem).prop("readonly", true);
}
} else {
//This part is not yet implemented. It is to be completed and verified in case the dropdown is `datalist`. You can skip this part.
if (elm.value != "Other" && !$(elm).attr("keypressOff")) {
$(elm).keypress(function(event) {
console.log("keypress preventd")
event.preventDefault();
})
} else {
$(elm).off("keypress");
$(elm).attr("keypressOff", true);
console.log("keypress event removed")
}
}
}           
angular.element(document).ready(function(){
makeEditable(elemSel);
});
$(elemSel).change(function () {
updateEditable(elemSel);
});
}
}
});