javascript - 使用 AngularJs 往返 "transfer"指令的最佳方法是什么

Question

我有一个具有以下结构的小部件(它是“计划选择器”简历):

<div>
  <ul>
    <li resume="to" ng-repeat="item in items"></li>
  </ul>
  <div class="total"></div>
  <ul>
    <li resume="from" ng-repeat="item in items"></li>
  </ul>
</div>

我的指令如下:

plans.directive('resume', function() {
  return {
    restrict: 'A',
    template: '<h3>{{step.name}}</h3><div>{{val}}</div>',
    link: function($scope, element, attrs, controller) {}
  };
});

注释:

• plans 是一个 angular.module('Plans')
• items 是通过 AJAX 加载的一些数据，每个项目都有一个 selected 属性
• 它们与将要选择的项目共享相同的 Controller ，即 PlansCtrl

我想要什么:

当用户选择完项目后(设置各个“selected”)，只有选中的时候才会显示在“to”中，没有选中的时候才会显示在“from”中。我不想硬编码任何内容，因为所有内容都是使用 AJAX 挂载的。

Answer 1

假设我理解正确，最好使用 the filter filter像这样:

http://jsfiddle.net/qbGeG/

<div ng-app ng-controller="x">
    <b>selected</b>
    <ul>
        <li ng-repeat="item in items | filter:{selected:true}" ng-click="item.selected = !item.selected">{{item.name}}</li>
    </ul>
    <div class="total"></div>
    <b>unselected</b>
    <ul>
        <li ng-repeat="item in items | filter:{selected:!true}" ng-click="item.selected = !item.selected">{{item.name}}</li>
    </ul>
</div>

如果您需要该功能作为指令，那么最好替换整个 li元素类似于:<selectableList source="items" />您的指令仅使用 filter和ngClick就像我上面做的那样。