带有下拉列表的 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.

我建立在我提出并在此处得到回答的另一个问题的基础上:Angular 待办事项列表指令

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

这是有效的:

• 点击编辑

这是我遇到的问题:

• 从下拉列表中显示文本而不是 ID
• 自动对焦对象以强制输入具有焦点，以便我可以真正捕捉模糊

下一个问题是:

• 我如何知道我要更新的对象要发送回服务器?

周日我确实花了一整天的时间试图让这些任务发挥作用，但失败了.我清理了大部分失败尝试的代码.

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 与您绑定的值匹配时返回 name.例如:

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-click 上调用.这将设置 scope.editStatusMode = true，然后在元素上调用 .focus.

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();
  });
};

在 $timeout 中包装 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-blur的指令中创建一个update()函数.在该函数中，您可以访问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);
}

这适用于 description 和 priority.它不适用于 status 因为当您更改状态时，它会立即从它所在的列表中消失并添加到不同的列表中，并且 blur 事件是从未被解雇.为了处理status，你可以在task.status上创建一个$watch，并调用update()从那里开始发挥作用.

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屋！