This is my code
// Code goes here
var app = angular.module('app', ['ui.grid','ngTagsInput']);
app.controller('TableCrtl', ['$scope', function ($scope) {
$scope.addData = function () {
var n = $scope.gridOpts.data.length + 1;
$scope.gridOpts.data.push({
"firstName": "New " + n,
"lastName": "Person " + n,
"company": "abc",
"employed": true
});
};
var data2 = [
{
"firstName": "Waters",
"lastName": "Shepherd",
"company": "Kongene",
"employed": true
},
{
"firstName": "Hopper",
"lastName": "Zamora",
"company": "Acium",
"employed": true
},
{
"firstName": "Marcy",
"lastName": "Mclean",
"company": "Zomboid",
"employed": true
},
{
"firstName": "Tania",
"lastName": "Cruz",
"company": "Marqet",
"employed": true
},
{
"firstName": "Kramer",
"lastName": "Cline",
"company": "Parleynet",
"employed": false
},
{
"firstName": "Bond",
"lastName": "Pickett",
"company": "Brainquil",
"employed": false
}
];
var origdata2 = angular.copy(data2);
var myDummyData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43,othernames:[{"id":"101","name":"one"},{"id":"102","name":"two"}]},
{name: "Jacob", age: 27,othernames:[{"id":"103","name":"three"}]},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOpts = {
data: myDummyData,
enableFiltering: true,
columnDefs: [
{name: 'Name', field: 'name', enableFiltering: true
, filter: {
term: $scope.filterOptions.filterText //DOES NOT WORK... BUT WHY
}
},
{name: 'Price', field: 'age'},
{name:'others',field:'othernames',cellTemplate:'<tags-input display-property="name replace-spaces-with-dashes="false" template="tag-template">'}
]
};
}]);/* Styles go here */
.cart-item.ng-enter {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
background-color: yellow;
}
.cart-item.ng-enter-active {
background-color: white;
}
.myGrid {
width: 1200px;
height: 800px;
}<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<link href="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.css" rel="stylesheet" type="text/css"/>
<script src="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js" type="text/javascript"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
</head>
<body ng-controller="TableCrtl">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">-------========TEST========-------</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li><a href="#/about">Impressum</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Produkt Name" ng-model="filterOptions.filterText">
</div>
<button type="submit" class="btn btn-default" ng-click="activateFilter()">Suchen</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div>
<input type="text" class="form-control" placeholder="Produkt Name" ng-model="filterOptions.filterText">
<br>
<div range-slider min="0" max="100" model-min="15" model-max="35"></div>
<br>
<div id="grid1" ui-grid="gridOpts" class="grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>In the above code i have 3 columns, third column contains othernames like an array, i want to print these names in tags format only . how to repeat other names in tags format in a column by using angular ui-grid. this is my plunker : http://plnkr.co/edit/hNKDh1zWWSNJzmqDMbdW?p=preview
