Question

我正在尝试根据对象数组填充表。这个数组不包含相同类型的对象，并且对于每一行我都喜欢完全不同的样式和onclick函数，基本上是完全不同的行为。例如，

var data=[
  {
    type:'dir-b',
    data: { ... }
  },
  {
    type:'dir-b',
    data: { ... }
  },
  {
    type:'dir-c',
    data: { ... }
  }
]

对于对象类型dirB我想要一个模板和控制器，而dirC则是一个完全不同的函数和模板。

我找到的解决方案是创建3个指令。其中一个将运行以确定基于数据添加的另外两个指令之一。

.directive("dirA", function($compile){
  return{
    restrict:'A',
    priority:1000,
    terminal:true,
    link: function(scope, element, attribute){
      element.removeAttr("dir-a");//prevent endless loop
      element.attr(attribute.type,"");
      $compile(element)(scope);
    }
  }
})
.directive("dirB", function($compile){
  return{
    restrict:'A',
    replace:true,
    link: function(scope, element, attribute){
        console.log("dirA");
    }
  }
})
.directive("dirC", function($compile){
  return{
    restrict:'A',
    replace:true,
    link: function(scope, element, attribute){
        console.log("dirC");
    }
  }
});

使用<tr dir-a type='{{d.type}}' ng-repeat='d in data'/>没有达到预期的效果。要么我给dirA优先级为0，它可以解析属性，但它重复的次数比数组大小多，或者我给它优先级1000，它不能解析b.type并使用它作为文字。有人有解决方案吗？

Answer 1

您可以在此处使用ngSwitch。

Plnkr

HTML

public static final String CAMERA_FRONT = "1";
public static final String CAMERA_BACK = "0";

private String cameraId = CAMERA_BACK;

然后您只需定义public void switchCamera() { if (cameraId.equals(CAMERA_FRONT)) { cameraId = CAMERA_BACK; closeCamera(); reopenCamera(); switchCameraButton.setImageResource(R.drawable.ic_camera_front); } else if (cameraId.equals(CAMERA_BACK)) { cameraId = CAMERA_FRONT; closeCamera(); reopenCamera(); switchCameraButton.setImageResource(R.drawable.ic_camera_back); } } public void reopenCamera() { if (mTextureView.isAvailable()) { openCamera(mTextureView.getWidth(), mTextureView.getHeight()); } else { mTextureView.setSurfaceTextureListener(mSurfaceTextureListener); } }和<div ng-repeat="(key, d) in data track by $index"> <div class="tbody" ng-switch on="d.type"> <div class="row" ng-switch-when="dir-b" dir-b>{{d}}</div> <div class="row" ng-switch-when="dir-c" dir-c>{{d}}</div> </div> </div>指令。

虽然这并没有显示为html表格，但你可以希望这样做吗？

Answer 2

不确定这是最好的解决方案，但这是我找到的解决方案。

<table>
  <tbody ng-repeat='d in data'>
    <tr ng-if='d.type=="dir-b"' dir-b></tr>
    <tr ng-if='d.type=="dir-c"' dir-c></tr>
  </tbody>
</table>

这种方式由于ng-if只显示正确的行，但问题是tbody将重复与数据中一样多的行。但是直到有一个更好的解决方案，我就是这样做的。

根据数据动态选择指令

2 个答案: