在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>

服務

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在行數組上運行。 解決問題的最佳方法是將轉換轉換為額外的getter和setter of global service。