Question

我是Stack Over flow的新手。我有这行编码

  <div class="col-sm-9" ng-controller ="BlogController as blg" ng-repeat.start="detail in blg.details">
  <h4><small>RECENT POSTS</small></h4>
  <hr>
  <h2>I Love Food</h2>
  <h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5>
  <h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br>

我想使用ng-repeat并将这些标题和所有内容放在一个单独的js文件中。有人可以帮助我。谢谢

Answer 1

Here是您的解决方案。

Angular app＆amp;控制器：

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

myApp.controller('BlogController',function(){
this.details = [
                 {title: 'I Love Food',
                  author: 'Jane Dane',
                  date: 'Sep 27, 2015',
                  categories: [{name:'Food', class: ' label-danger'}, {name:'Ipsum', class: ' label-primary'}],
                  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
                 },
                 {title: 'I Love World',
                  author: 'Jane Dane',
                  date: 'Nov 12, 2015',
                  categories: [{name:'Nature', class: ' label-warning'}, {name:'Ipsum', class: ' label-primary'}],
                  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
                   }
                 ]
});

HTML：

<body ng-app="myApp">
  <div class="col-sm-9" ng-controller="BlogController as blg">
    <h4>
      <small>RECENT POSTS</small>
    </h4>
    <hr />
    <div  ng-repeat="detail in blg.details">
      <h2>{{detail.title}}</h2>
      <p>{{detail.content}}</p>
      <h5>
        <span class="glyphicon glyphicon-time"></span>
        Post by {{detail.author}}, {{detail.date}}.
      </h5>
      <h5>
        <span ng-repeat="category in detail.categories" class="label {{category.class}}">{{category.name}}</span>
      </h5>
      <br />
    </div>
  </div>

</body>

看起来像这样：

Plunker中的完整解决方案。

需要Angular JS帮助

1 个答案: