Delete and break data from json at specific place in angularjs

Question

I have json that looks like this (I can't change that):

Desc: First data - Second data

And I am displaying it with:

<div ng-repeat="b in a.Items">{{b.Desc}}</div>

But I need to display 'Second data' under 'First data' and without '-'

So now it is displayed like:

<div>First data - Second data</div>

And I need it like

<div><p>First data</p><p>Second data</p></div>

or

<div>First data<br/>Second data</div>

How can I break it and delete '-'? Is there option or filter for that in angularjs?

I recommend manipulating your data into what your html needs. This is what MVC and MVVM frameworks are all about. The data you are using must actually represent the view. If it does not, then first it should be manipulated to what view requires.. — Noldor
– Noldor, Commented Nov 13, 2015 at 13:46

Emir Marques · Accepted Answer · 2015-11-13 13:04:10Z

1

Use the $filter the angle to it. It is important to be careful in cases where string does not have the "-" character. So the use of the $filter is recommended

var app = angular.module("App", []);
app.controller('AppController', function($scope) {
   $scope.a = {Items:["XX-BBB", "CCC-AAA", "-VVV", "FFF-"]};
}).filter('splitValue', function() {
    var indexAllItens = 0;
    return function(input, index) {
       console.log(input + ' ' + index)
        var data = input.split('-'), str = '';
        if(data.length >= index)
            str = data[index];
        return str;
    };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
  <ul ng-repeat="b in a.Items">
     <li>{{b | splitValue:0}}</li> <li>{{b | splitValue:1}}</li>
  </ul>
</div>

answered Nov 13, 2015 at 13:04

Emir Marques

2,6872 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sahbeewah · Accepted Answer · 2015-11-13 12:48:13Z

1

The correct way to solve this problem is to translate your data in the controller and attach the translated data onto the scope.

But here's a quick hack:

<div><p>{{ b.Desc.split(' - ')[0] }}</p><p>{{ b.Desc.split(' - ')[1] }}</p></div>

answered Nov 13, 2015 at 12:48

sahbeewah

2,6901 gold badge15 silver badges18 bronze badges

Collectives™ on Stack Overflow

Delete and break data from json at specific place in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related