AngularJs与下拉列表指令 [英] AngularJs Directives with DropDown lists

问题描述

或许我的目标和我的可重复使用的指导思想太大，但我一直在问给为我公司在不到两周的演示，所以我的目标高于正常。

Perhaps I'm aiming too big with my reusable directive idea, but I've been asked to give a demo for my company in less than two weeks, so I'm aiming higher than normal.

我要建在另一个问题，我问，并在这里得到解答顶：
角待办事项指令

I'm building on top of another question I asked and was answered here: Angular to do list directive

我添加了一些新功能，如点击编辑。

I've added some new features, such as "Click to edit".

下面是我的 plnkr

下面就是作品：

• 单击编辑

下面是我有什么有问题：

Here's what I'm having problems with:

• 显示文本，而不是从ID下拉列表


• 自动对焦对象强制输入到具有焦点，所以我可以真正捕捉模糊

接下来的问题将是：

• 如何知道我更新发送回服务器什么对象？

我确实花了周日全天试图让这些任务工作，但失败了。我清理了我大部分的失败尝试的code。

I did spend all day Sunday trying to get those tasks to work, but failed. I cleaned up the code of most of my failed attempts.

我想每一次我编辑的字段保存记录。我得到了我更新的目标，我认为这是美丽的，但我不知道是什么触发的对象发送回服务器。也许这就是jQuery的背景谈起？

I do want to save the record each time I edit a field. I get that I'm updating the object, which I think is beautiful, but I don't know what to trigger to send the object back to the server. Perhaps that's the jQuery background talking?

谢谢，
杜安

推荐答案

要显示下拉列表中的文本，而不是ID

您可以在能够通过选项循环指令功能，并返回名称在 ID 要绑定的值相匹配。例如：

You can create a function in the directive that loops through the options, and returns the name when the id matches the value you're binding on. For example:

scope.statusText = function(){
  var text = '';
  angular.forEach(scope.statusOptions, function(item){
    if(item.id == scope.task.status)
        text = item.name;
    });
    return text;
}

支持自动对焦元素

创建被称为在显示跨度NG-点击指令的功能。这将设置 scope.editStatusMode = TRUE ，然后调用。重点的元素。

Create a function in the directive that is called on the ng-click of the "display" span. This will set scope.editStatusMode = true, then call .focus on the element.

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

包裹 el.focus（）在 $超时将延迟呼叫集中，直到DOM完成渲染。该HTML如下：

Wrapping the el.focus() in $timeout will delay the call to focus until the DOM is done rendering. The HTML looks like this:

<span ng-hide="editStatusMode" ng-click="setStatusFocus()" ng-bind="statusText()"></span>

你怎么知道哪个对象要更新

创建一个更新（）在绑定到'NG模糊的指导作用。在这个功能，您可以访问 scope.task`，您可以发送给您的服务器保存。

Create an update() function in the directive that is bound to 'ng-blur. In that function, you can accessscope.task`, which you can send off to your server to save.

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

这适用于说明和优先级。它不为状态，因为当你更改状态，它会立即从它在任何列表中消失，并添加到不同的列表，而<$ C $工作C>模糊事件从来没有发射。为了应对状态，您可以创建一个 $观看在 task.status ，并呼吁从那里更新（）功能。

This works for description and priority. It doesn't work for status because when you change the status, it immediately disappears from whichever list it is in and is added to a different list, and the blur event is never fired. To deal with status, you can create a $watch on task.status, and call the update() function from there.

scope.$watch('task.status', function(oldValue, newValue){
  scope.update();
})

Plunker

这篇关于AngularJs与下拉列表指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！