Question

我正试图以角度分割从JSON数组中拉出的字符串。我尝试使用角度{{filter}}，但不确定我是否在正确的轨道上。我希望每个标签都有自己的链接。即<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

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

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

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

我有PLUNKER显示上面的代码 - 谢谢

Answer 1

我建议您操纵data从tags.json读取，生成一个带有每个元素标记的简单数组。为此，您可以使用简单的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);
    });
  });

首先，我使用Array.prototype.map()从data tags内的每个对象中提取Array.prototype.reduce()属性的值并将其拆分。这会产生一个数组数组。我使用filter来展平数组并使用单个标记生成和数组。

然后，在HTML页面中，我删除了Angular.js feed并直接使用<li> <a ng-href="http://www.example.com/{{feed}}" ng-repeat="feed in feedCtrl.feeds">{{feed}}  |  </a> </li>值：

internal class Program
{
    private static void Main( string[] args )
    {
        Teacher teacher = new Teacher();
        Console.WriteLine("{0} and {1} are in {2}",
        teacher.Namef1, teacher.Namet, teacher.Course);
    }

    private class UCourse
    {
        // Set the unique string for the 1st class
        private readonly string course = "Computer Scienece";
        public string Course { get { return this.course; } }
    }

    private class Student
    {
        // Set the unique string for the 2nd class
        private readonly string _name = "zach";
        public string Name { get { return this._name; } }

        // Get the string from the 1st class
        private readonly UCourse _ucourse = new UCourse( );
        public string Coursef1 { get { return this._ucourse.Course; } }
    }

    private class Teacher
    {           
        private readonly Student _student = new Student( );

        // Get the unique string from the 1nd class
        public string Course { get { return this._student.Coursef1; } }

        // Get the unique string from the 2nd class
        public string Namef1 { get { return this._student.Name; } }

        // Set the unique string for the 3rd class
        private readonly string _namet = "Sally";
        public string Namet { get { return this._namet; } }
    }
}

Here you can find the PLUNKER with the code

Answer 2

以下是如何做到这一点。

首先，您需要通过定义分隔符（在您的情况下为空格）来分割字符串。然后将其分配给您的范围：

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;
    });
}]);

如果您在模板中完成此操作，则可以递归地使用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>

这是工作plunkr。

使用angularjs分割字符串

2 个答案: