Question

我在前端使用Angular.js来填充表格。我想使用ng-switch仅显示在一列中具有特定数据的数据，例如，仅显示NFL计划列表中的“第1周”数据，其中数据中的一列是周。

所以现在这段代码没有在表格中显示任何内容。如果有人可以帮助解释这一点，将不胜感激。也许我应该使用ng-if？也许我应该按一下按钮来显示第1周，第2周等。这类情况的最佳解决方案是什么？

这是控制器..

    public class SelectionUtil {
    private IWorkbenchWindow window;
    private IWorkbenchPage activePage;
    private TreeSelection treeSelection;
    private TreePath[] treePaths;
    HashMap<Object, Object> selectData;
    private IProject theProject;
    private IResource theResource;
    private IFile theFile;
    private IPackageFragment theFragment;
    private String workspaceName;
    private String projectName;
    private String fileName;
    private String fileNameFile;
    private String fragmentName;
    private TreePath treePath;
    public SelectionUtil(ExecutionEvent event) {
        this.window = HandlerUtil.getActiveWorkbenchWindow(event);
        // Get the active WorkbenchPage
        this.activePage = this.window.getActivePage();

        // Get the Selection from the active WorkbenchPage page
        ISelection selection = this.activePage.getSelection();
        if (selection instanceof ITreeSelection) {
            this.treeSelection = (TreeSelection) selection;
            this.treePaths = treeSelection.getPaths();
            this.treePath = treePaths[0];
            selectData = new ProjectSelectionUtil()
                    .populatePojectData(treePath);
            setData();
        } else {
            String selectionClass = selection.getClass().getSimpleName();
            MessageDialog
                    .openError(
                            this.window.getShell(),
                            "Unexpected Selection Class",
                            String.format(
                                    "Expected a TreeSelection but got a %s instead.\nProcessing Terminated.",
                                    selectionClass));
        }
    }
   public void setData() {
        this.theProject = (IProject) selectData.get("Project");
        this.theResource = (IResource) selectData.get("Resource");
        this.theFragment = (IPackageFragment) selectData.get("Fragment");
        this.workspaceName = this.theResource.getWorkspace().getRoot()
                .getLocation().toOSString();
        this.projectName = this.theProject.getName();
        if (this.theFragment != null)
            this.fragmentName = this.theFragment.getElementName();
        try {
            if (!this.theResource.getName().isEmpty()
                    && this.theResource.getName().length() > 5)
                this.fileName = this.theResource.getName().substring(0,
                        this.theResource.getName().length() - 5);
        } catch (NullPointerException e) {
            System.out
                    .println(" GactusWindowSelectionUtil SetData NullPointerException"
                            + e.getMessage() + e.getLocalizedMessage());
        } catch (StringIndexOutOfBoundsException e) {
            System.out
                    .println(" StringIndexOutOfBoundsException SetData NullPointerException"
                            + e.getMessage() + e.getLocalizedMessage());
        }

    }






    public String toString() {
        ProjectInformation myProject = new ProjectInformation(theProject);
        return "Segment Count " + treePath.getSegmentCount() + " Iproject"
                + myProject.toString();
    }
}

这是工厂..

// #########################
// Predictions Controller
// #########################
BLV_app.controller('PredictionsController', function($scope, PredictionsFactory, $routeParams) {
  PredictionsFactory.getPredictions(function(data) {
        $scope.predictions = data;
  });
});

这是html ..

// ---------------------------
// Prediction Factory
// ---------------------------
BLV_app.factory('PredictionsFactory', function($http) {
  var factory = {};
  var predictions = [];
  factory.getPredictions = function(callback) {
    $http.get('/predictions').success(function(output) {
        predictions = output;
        console.log("prediction factory", predictions);
        callback(output);
      });
    };
  return factory;
});

Answer 1

我认为ng-repeat和ng-switch绑定到tbody和td等元素时出现问题。将其替换为div和li，使其正常工作：JSFiddle。

<div ng-repeat="predict in predictions">
    <div ng-model="predict.id"></div>
    <div ng-switch="predict.id">
    <div ng-switch-when="1">
        <li ng-if="$odd" style="background-color:#f1f1f1">{{ predict.name }}</li>
    ......

从<div ng-repeat="predict in predictions">更改为<tbody ng-repeat="predict in predictions">会使其无效：JSFiddle。

在ng-repeat docs和ng-switch docs中，它说：

Usage
as attribute:
<ANY
  ng-repeat="">
...
</ANY>

但显然它们不能用于 ANY 元素。

使用ng-switch填充表

1 个答案: