Dynamic string split while binding data in angularJS

Question

I am trying to implement chips style. Adding tags and remove tags like chips style to an item, for that I need to split string and bind separately based on length of array of split.

How to split comma speared dynamic length string while binding data.

how can I use angular filters here
Please check following code.

JS: Controller:

var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) { 
  var temp= {
  "values": [
    {
      "id": "1",
      "tags": "Design research, UI Frameworks, Wireframes" 
    },
    {
      "id": "2",
      "tags": "Hockey, basketball, Cricket, Football, Baseball"
    },
    {
      "id": "3",
      "tags": "Sensors, maps, Location Service, Studio"      
    },
  ],
  "count": "3"
};
 // I have json like this
 $scope.items = temp.values; 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" >
<div ng-controller ="myCtrl">
  <p ng-repeat="item in items">
  <span>{{item.tags}}</span>
  </p>
  </div>
  <hr>
  <!-- here  I am trying implement chips style -->
  <!-- Requieremrnt-->
  <span style="background:#ddd;">{{item.tags[0]}}</span>
   <span style="background:#ddd;">{{item.tags[1]}}</span>
  <span style="background:#ddd;">{{item.tags[n]}}</span>
  <!-- can I use ng-repeat or custom filter. if yes how??--> 
  <hr>
  </body>

Can I use ng-repeat or custom filter. if yes how??

Thanks.

Can you please update your snippet to have complete, runnable code? — dmlittle, Sep 25 '16 at 06:44

score 1 · Accepted Answer · edited May 23 '17 at 12:25

There is no need to create a custom filter to do so (although you can if you want to).

For this particular purpose, you can split the tags in your controller and then simply iterate through the strings in your view. In this case we'll use a double ng-repeat. The first one to iterate through all group of strings in each set of tags and the second one to iterate through the split string items. I've modified your code below and cleaned it up a bit.

var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {

  var temp= {
  "values": [
    {
      "id": "1",
      "tags": "Design research, UI Frameworks, Wireframes" 
    },
    {
      "id": "2",
      "tags": "Hockey, basketball, Cricket, Football, Baseball"
    },
    {
      "id": "3",
      "tags": "Sensors, maps, Location Service, Studio"      
    },
  ],
  "count": "3"
};
                       
 $scope.items = temp.values.map(function (item) {
  return item.tags.split(",");
 });
      
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" >
  <div ng-controller ="myCtrl">
    <div ng-repeat="group in items">
      <p ng-repeat="tag in group">{{tag}}</p>
      <hr />
    </div>
  </div>
</body>

Dynamic string split while binding data in angularJS

1 Answers1