使用angularjs分割字符串

Question

I'm trying to split a string pulled from a JSON array in angular. 我正在尝试以角度分割从JSON数组中提取的字符串。 I've tried using the angular {{filter}} but not sure I'm on the right track. 我已经尝试过使用成角度的{{filter}}，但不确定自己是否在正确的轨道上。 I want each tag in it's own link. 我希望每个标签都有自己的链接。 ie <a ng-href="">tall</a> | <a ng-href="">large</a> etc... 即<a ng-href="">tall</a> | <a ng-href="">large</a> etc... <a ng-href="">tall</a> | <a ng-href="">large</a> etc...

<body ng-app="feedApp">
   <div ng-controller="FeedController as feedCtrl">
       <ul class="tags">
         <li>Tags: </li>
         <li>
            <a ng-href="http://www.example.com/{{feed.tags|filter:' '}}" ng-repeat="feed in feedCtrl.feeds">{{feed.tags|filter:' '}} &nbsp;|&nbsp; </a>
         </li>
      </ul>
   </div>
</body>

JS JS

var app = angular.module('feedApp', [ ]);

app.controller('FeedController', ['$http', '$scope',function($http, $scope){
    var array = this;
    array.feeds = [ ];
    $http.get('tags.json').success(function(data){
    array.feeds = data;
});

JSON JSON格式

[
    {
       "tags": "tall large winner skill"
    },

    {
       "tags": "short knowledge"
    },
]

I have a PLUNKER that shows the code above - thanks 我有一个PLUNKER ，上面显示了代码-谢谢

Answer 1

I suggest you to manipulate the data read from tags.json producing a simple array with a tag for each element. 我建议您处理从tags.json读取的data ， tags.json每个元素生成一个带有标签的简单数组。 To do so, you can use simple JavaScript code: 为此，您可以使用简单的JavaScript代码：

  $http.get('tags.json').success(function(data) {
    var splittedTags = data.map(function(e) {
      return e.tags.split(' ');
    });
    array.feeds = splittedTags.reduce(function(a, b) {
      return a.concat(b);
    });
  });

First I use Array.prototype.map() to extract from every object inside data the value of tags attribute and split it. 首先，我使用Array.prototype.map()从data内部的每个对象中提取tags属性的值并将其拆分。 This produce an array of array. 这将产生一个数组数组。 I use the Array.prototype.reduce() to flatten the array and produce and array with the single tags. 我使用Array.prototype.reduce()展平数组，并使用单个标签生成和数组。

Then, in the HTML page I remove the Angular.js filter and use directly the feed value: 然后，在HTML页面中，删除Angular.js filter并直接使用feed值：

  <li>
    <a ng-href="http://www.example.com/{{feed}}" ng-repeat="feed in feedCtrl.feeds">{{feed}} &nbsp;|&nbsp; </a>
  </li>

Here you can find the PLUNKER with the code . 在这里，您可以找到带有代码的PLUNKER 。

Answer 2

Here is how you can do it. 这是您的操作方法。

First you need to split the string by defining the delimiter (in your case is space). 首先，您需要通过定义定界符（在您的情况下为空格）来分割字符串。 You then assign it to your scope: 然后，将其分配给您的范围：

var app = angular.module('feedApp', []);

app.controller('FeedController', ['$http', '$scope',function($http, $scope){
    var array = this;
    array.feeds = [ ];
    var strings = [];

    $http.get('tags.json').success(function(data){
      data.map(function(elem) {
        strings.push(elem.tags.split(' '));
      });

      array.feeds = strings;
    });
}]);

If you are done with this in your template you can iterate over your array with ng-repeat recursively: 如果在模板中完成了此操作，则可以递归地使用ng-repeat遍历数组：

<body ng-controller="FeedController as feedCtrl">
    <ul class="tags">
      <li>Tags: </li>
      <li>
        <div ng-repeat="feeds in feedCtrl.feeds">
          <div class="link" ng-repeat="(key, value) in feeds">
            <a ng-href="http://www.example.com/{{value}}" >{{value}} &nbsp;|&nbsp; </a>
          </div>
        </div>
      </li>
    </ul>
</body>

Here is the working plunkr . 这是工作中的朋克。

使用angularjs分割字符串

问题描述

2 个解决方案

解决方案1
0 2015-07-30 14:42:47

解决方案2
0 2015-07-30 14:46:15

使用angularjs分割字符串

问题描述

2 个解决方案

解决方案1 0 2015-07-30 14:42:47

解决方案2 0 2015-07-30 14:46:15

解决方案1
0 2015-07-30 14:42:47

解决方案2
0 2015-07-30 14:46:15