javascript - 在 textarea angularJs 服务中编辑文本

Question

我正在管理 View 中的文本区域中编辑文本，并希望通过 Angular 服务在用户 View 中显示它，因此文本显示为单行。如何在多行中显示它，即以我在 textarea 中输入的相同格式显示？ 它是我的 textarea 和 btn 在管理 View 中

 <textarea name="" id="textAreaAbout" cols="50" rows="10" ng-model="aboutAdmin.about"></textarea>
 <button type="button" class="btn-primary" ng-click="aboutAdmin.saveAboutBtn(aboutAdmin.about)">Save</button>

服务

app.factory('global', function(){

    let _items = [
        'Hi, my name is Pavlo Lapan and I am front-end developer from Ukraine.',
        'I have got more than 1 years of experience in web development. I think my strong points are dedication, punctuality and easy in communication',
        'Right now I am on the third year of studying at Software Engineering specialization in Lviv National University, in Ukraine.',
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aspernatur, distinctio doloribus error et maxime tempore? Ducimus, exercitationem sed.',
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aspernatur, distinctio doloribus error et maxime tempore? Ducimus, exercitationem sed.',
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aspernatur, distinctio doloribus error et maxime tempore? Ducimus, exercitationem sed.',
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aspernatur, distinctio doloribus error et maxime tempore? Ducimus, exercitationem sed.'
    ];

    let _itemId = 1;

    return {
        getItems: function(){
            return _items;
        },
        getItemId: function(){
            return _itemId;
        },
        setItemId: function(itemId){
            if(itemId<_itemId) alert('error')
            else _itemId = itemId;
        },
        setItems: function (items) {
            _items = items;
        }
    }
})

Controller

app.controller('aboutAdminCtrl', function(global){
    let vm = this;
    vm.about = global.getItems();

    vm.saveAboutBtn = function (text) {
        console.log(vm.about);
        vm.about = text;
        console.log(vm.about);
        global.setItems(vm.about);
    }
})

用户 View

<p ng-repeat="text in about.about track by $index">{{text}}</p>

用户控制

app.controller('aboutCtrl', function(global){
    let vm = this;
    vm.about =[];
    vm.about = global.getItems();
})

Answer 1

您的问题是使用字符串:'line1\n;line2\netc...' 而不是 ['line1', 'line2', 'etc...']

在 Javascript 中，字符串在技术上是单个字符的数组 ;) ['l', 'i', 'n', 'e', '1', '\n', ...]。所以您只是使用 ng-repeat 迭代单个字符。

要解决这个问题，您必须添加一些转换:

app.controller('aboutAdminCtrl', function(global){
    let vm = this;
    vm.about = global.getItems();

    vm.saveAboutBtn = function (text) {
        const separateLines = text.split('\n');
        global.setItems(separateLines);
        vm.about = global.getItems(); //I guess that list of separate lines is proper format here
        console.log(vm.about);
    }
})

编辑

我忘记了重要的事情。 textarea 的模型需要单独的字段，因为 textarea 本身需要纯文本:'line\nline2\n...' 和 ng-repeat 对行数组进行操作。解决问题的最佳方法是将转换转移到 global 服务的附加 getter 和 setter 中。