Question

我正在使用ng-repeat来填表。有些元素的长度很长，如果达到特定的长度，我正在寻找一种将内容切割成多行的方法。

在研究期间，我发现了Angulars limitTo，但它看起来并不像我在寻找的那样。

E.g。 hi i'm a long description and oh, a package (org.foo.awesome.stuff)应转换为hi i'm a long description and oh,'
a package (org.foo.awesome.stuff)

提前非常感谢。

Answer 1

编写自定义过滤器：

angular.module('filters', []).filter('lineBreaker', function() {
  return function(input, breakLength) {
    var newString = "";
    for (var i = 0; i < input.length; i++) {
      newString = newString+input[i];
      if (i%breakLength == 0) {
        newString = newString+"\n";
      }
    }
    return newString;
  };
});

叫做：

{{ expression | lineBreaker: 10 }}

我确信有一种更高效的方法可以做到这一点，但它会完成工作。

Answer 2

app.filter("break", function(){
    return function(input, length){
        return input.match(new RegExp(".{1," + length + "}", 'g')).join("<br/>");
    }
});

Answer 3

您可以使用以下内容在每个limit个字符处插入换行符：

var a = "hi i'm a long description and oh, a package (org.foo.awesome.stuff)";
var limit = 10;

for (var i = 0; i < a.length; i++) {
   if (i % (limit + 1) === 0 && i > 0) {
      a = [a.slice(0, i), '\n', a.slice(i)].join('');
   }
}

console.log(a);

/** Output:
  hi i'm a lo
  ng descrip
  tion and o
  h, a packa
  ge (org.fo
  o.awesome.
  stuff)"
*/

将其丢入自定义过滤器。

Answer 4

更简单的解决方案是使用CSS修改表格元素中文本的自动换行。 e.g。

package Demo;

import javafx.application.Application;
import javafx.concurrent.Task;
import javafx.concurrent.WorkerStateEvent;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class BackgroundWorkerDemo extends Application {

    private final static String CNTR_LBL_STR = "Counter: ";
    private int counter;

    Label counterLabel;
    Button counterButton;
    Button taskButton;

    @Override
    public void start(Stage primaryStage) {
        counter = 0;
        counterLabel = new Label(CNTR_LBL_STR + counter);
        counterButton = new Button("Increment Counter");
        counterButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent e) {
                counter++;
                counterLabel.setText(CNTR_LBL_STR + counter);
            }
        });
        taskButton = new Button("Long Running Task");
        taskButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent e) {
               runTask();
            }
        });

        VBox mainPane = new VBox();
        mainPane.setPadding(new Insets(10));
        mainPane.setSpacing(5.0d);
        mainPane.getChildren().addAll(counterLabel, counterButton, taskButton);
        primaryStage.setScene(new Scene(mainPane));
        primaryStage.show();
    }

    private void runTask() {

        final double wndwWidth = 300.0d;
        Label updateLabel = new Label("Running tasks...");
        updateLabel.setPrefWidth(wndwWidth);
        ProgressBar progress = new ProgressBar();
        progress.setPrefWidth(wndwWidth);

        VBox updatePane = new VBox();
        updatePane.setPadding(new Insets(10));
        updatePane.setSpacing(5.0d);
        updatePane.getChildren().addAll(updateLabel, progress);

        Stage taskUpdateStage = new Stage(StageStyle.UTILITY);
        taskUpdateStage.setScene(new Scene(updatePane));
        taskUpdateStage.show();

        Task longTask = new Task<Void>() {
            @Override
            protected Void call() throws Exception {
                int max = 50;
                for (int i = 1; i <= max; i++) {
                    if (isCancelled()) {
                        break;
                    }
                    updateProgress(i, max);
                    updateMessage("Task part " + String.valueOf(i) + " complete");

                    Thread.sleep(100);
                }
                return null;
            }
        };

        longTask.setOnSucceeded(new EventHandler<WorkerStateEvent>() {
            @Override
            public void handle(WorkerStateEvent t) {
                taskUpdateStage.hide();
            }
        });
        progress.progressProperty().bind(longTask.progressProperty());
        updateLabel.textProperty().bind(longTask.messageProperty());

        taskUpdateStage.show();
        new Thread(longTask).start();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

除此之外，您可能还需要编辑表格元素的宽度，以便进行自动换行（而不是像文本一样创建一个框）。这可以通过编辑css样式简单地实现，如下面的代码所示。有两种选择（取决于您是否希望您的网页可扩展）
选项1：

th {
word-wrap:normal;
}
td {
word-wrap:normal;
}

选项2：

th {
width:300px;
}
...

同样值得注意的是这个解决方案，它不会破坏任何单词的给定字符串（除非另有说明这样做）。您可以阅读有关自动换行here的更多信息。

在达到最大长度后，AngularJS换行

4 个答案: