Question

我正在尝试实施chips style。添加标签并将标签（如芯片样式）移除到项目中，因此我需要根据拆分数组的长度分割字符串并单独绑定。

如何在绑定数据时拆分逗号speared动态长度字符串。

我如何在这里使用角度滤镜
请检查以下代码。

JS：控制器：

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>

我可以使用ng-repeat或自定义过滤器。如果是的话怎么样？

感谢。

Answer 1

无需创建自定义过滤器（although you can if you want to）。

出于这个特殊目的，您可以在控制器中拆分tags，然后只需遍历视图中的字符串。在这种情况下，我们将使用双ng-repeat。第一个迭代每组tags中的所有字符串组，第二个遍历拆分字符串项。我在下面修改了你的代码并稍微清理了一下。

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>

在angularJS中绑定数据时动态字符串拆分

1 个答案: