Редактировать текст в сервисе textarea angularJs

Question

Я редактирую текст в textarea в административном представлении и хочу отобразить его через угловую службу в пользовательском представлении, поэтому текст отображается в виде одной строки.Как я могу отобразить его в нескольких строках, т.е. в том же формате, который я ввел в 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>

service

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

EDIT

Я забыл важную вещь.Вам нужно отдельное поле для модели для textarea, потому что textarea сам нуждается в чистом тексте: 'line \ nline2 \ n ...', а ng-repeat работает с массивом строк.Лучший способ решить эту проблему - перевести преобразования в дополнительный метод получения и установки службы global.