1

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

<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加载的一些数据，每个item都有一个selected属性
  • 它们与将要选择的项目共享相同的控制器，即PlansCtrl

我想要的是：

当用户完成选择项目（设置每个“选定”）时，它只会在“to”中显示，当它被选中时，它只会在“from”中显示，当它没有被选中时。我不想硬编码任何东西，因为一切都是使用 AJAX 安装的。

4

1 回答 1

1

假设我对您的理解正确，最好像这样使用过滤器过滤器：

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就像我在上面所做的那样。

于 2013-04-21T03:43:27.040 回答