AngularJs Directives with DropDown lists -

perhaps i'm aiming big reusable directive idea, i've been asked give demo company in less 2 weeks, i'm aiming higher normal.

i'm building on top of question asked , answered here: angular list directive

i've added new features, such "click edit".

here's plnkr

here's works:

• click edit

here's i'm having problems with:

• display text instead of id drop down list
• auto-focus object force input have focus can capture blur

next question be:

• how know object i'm updating send server?

i did spend day sunday trying tasks work, failed. cleaned code of of failed attempts.

i want save record each time edit field. i'm updating object, think beautiful, don't know trigger send object server. perhaps that's jquery background talking?

thanks, duane

to display text instead of id dropdown list:

you can create function in directive loops through options, , returns name when id matches value you're binding on. example:

scope.statustext = function(){   var text = '';   angular.foreach(scope.statusoptions, function(item){     if(item.id == scope.task.status)         text = item.name;     });     return text; } 

to auto-focus element

create function in directive called on ng-click of "display" span. set scope.editstatusmode = true, call .focus on element.

scope.setstatusfocus = function(){   scope.editstatusmode = true;   var el = element.find('select');   $timeout(function(){     el.focus();   }); }; 

wrapping el.focus() in $timeout delay call focus until dom done rendering. html looks this:

<span ng-hide="editstatusmode" ng-click="setstatusfocus()" ng-bind="statustext()"></span> 

how know object you're updating

create update() function in directive bound 'ng-blur. in function, can accessscope.task`, can send off server save.

scope.update = function(){   scope.editprioritymode = false;   //save scope.task here.   console.log(scope.task); } 

this works description , priority. doesn't work status because when change status, disappears whichever list in , added different list, , blur event never fired. deal status, can create $watch on task.status, , call update() function there.

scope.$watch('task.status', function(oldvalue, newvalue){   scope.update(); }) 

plunker