Question

我正在admin视图中的textarea中编辑文本，并希望通过User视图上的角度服务显示它，因此文本显示为单行。如何在多行中显示它，即以我在textarea中输入的相同格式显示？ 在管理员视图上是我的textarea和btn

 <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;
        }
    }
})

控制器

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);
    }
})

用户视图

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

用户Ctrl

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中。

在textarea angularJs服务中编辑文本

1 个答案: