如何在 angular ui-grid 中重复 ng-tags-input？

Question

这是我的代码

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

在上面的代码中我有 3 列，第三列包含像数组一样的其他名称，我只想以标签格式打印这些名称。如何使用 angular ui-grid 在列中以标签格式重复其他名称。这是我的笨蛋：http://plnkr.co/edit/hNKDh1zWWSNJzmqDMbdW?p=preview

Answer 1

首先，升级您的 angular 版本（应大于 1.3。*）以使 ng-tags-input 正常工作。
其次，您还没有定义 "tag-template".

第三列的单元格模板：

<tags-input ng-model="row.entity.othernames" display-property="name" replace-spaces-with-dashes="false">

这里是没有标签模板的工作代码。 http://plnkr.co/edit/ZrVN988WXn2au7xN1reV?p=preview

如何在 angular ui-grid 中重复 ng-tags-input？

How to repeat ng-tags-input in angular ui-grid?

angularjs

ng-tags-input

angular-ui-grid