CODEWITHSUNDEEP
javascriptangularjs
Павло Лапан
Павло Лапан

Reputation: 33

Edit text in textarea angularJs service

I am editing text in textarea in admin View and want to display it via angular service on User view, so text displayed as single row. How can I display it in multiple rows i.e., in same format that I entered in textarea? Its my textarea and btn on admin 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>

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

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

user view

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

user Ctrl

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

Upvotes: 3

Views: 141

Answers (1)

mpasko256
mpasko256

Reputation: 841

Your problem was using string: 'line1\n;line2\netc...' instead of ['line1', 'line2', 'etc...']

In Javascript, string is technically an array of single characters ;) ['l', 'i', 'n', 'e', '1', '\n', ...]. So you was simply iterating over single characters using ng-repeat.

To solve the problem you have to add some conversion:

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

I forgot important thing. You need separate field for model for textarea because textarea itself needs pure text: 'line\nline2\n...', and ng-repeat operates on array of lines. The best way to solve problem would be to move conversions into additional getter and setter of global service.

Upvotes: 3

Related Questions