Question

我想通过在输入部分输入日期，作者和评级来按特定顺序显示评论。他们还应该能够按降序排序，例如，如果键入了-date。我被卡住了。

这是我的代码。

                <ul class="list-unstyled" ng-repeat="comment in dishDetailCtrl.dish.comments | orderBy:dishDetailCtrl.sortBy">
                  <li><blockquote>
                      <h4>{{comment.rating}} Stars</h4>
                      <h4>{{comment.comment}}</h4>
                      <footer>
                          {{comment.author}}, {{comment.date | date:mediumDate}}
                      </footer>
                  </blockquote></li>
              </ul>

<script>

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

    app.controller('dishDetailController', function() {

        var dish={
                      name:'Uthapizza',
                      image: 'images/uthapizza.png',
                      category: 'mains', 
                      label:'Hot',
                      price:'4.99',
                      description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
                       comments: [
                           {
                               rating:5,
                               comment:"Imagine all the eatables, living in conFusion!",
                               author:"John Lemon",
                               date:"2012-10-16T17:57:28.556094Z"
                           },
                           {
                               rating:4,
                               comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                               author:"Paul McVites",
                               date:"2014-09-05T17:57:28.556094Z"
                           },
                           {
                               rating:3,
                               comment:"Eat it, just eat it!",
                               author:"Michael Jaikishan",
                               date:"2015-02-13T17:57:28.556094Z"
                           },
                           {
                               rating:4,
                               comment:"Ultimate, Reaching for the stars!",
                               author:"Ringo Starry",
                               date:"2013-12-02T17:57:28.556094Z"
                           },
                           {
                               rating:2,
                               comment:"It's your birthday, we're gonna party!",
                               author:"25 Cent",
                               date:"2011-12-02T17:57:28.556094Z"
                           }

                       ]
                };

        this.dish = dish;

    });
</script>

Answer 1

上面的代码似乎有效，我认为你错过了将ng-model变量名称错误地写为SortBy输入。

应该是

ng-model="dishDetailCtrl.sortBy"

而不是

ng-model="sortBy"

<强> HTML

<div ng-controller="dishDetailController as dishDetailCtrl">
  Sort By <input type="text" ng-model="dishDetailCtrl.sortBy">
  <ul class="list-unstyled" ng-repeat="comment in dishDetailCtrl.dish.comments | orderBy:dishDetailCtrl.sortBy">
    <li>
      <blockquote>
        <h4>{{comment.rating}} Stars</h4>
        <h4>{{comment.comment}}</h4>
        <footer>
          {{comment.author}}, {{comment.date | date:mediumDate}}
        </footer>
      </blockquote>
    </li>
  </ul>
</div>

Demo Plunkr

Answer 2

<div class="col-xs-9 col-xs-offset-1">
                    <div class="container">
                        <div class="row">
                        <div class="col-xs-2">Customer Comments</div>
                        <div class="col-xs-3-offset-1">
                            Sort by<input type="text" ng-model="dishDetailControllerSortBy" value=" ">
                            </div>
                        </div>
                        <div class="media-list" ng-repeat="cmnt in dishCtrl.dish.comments | orderBy:dishDetailControllerSortBy">
                            <div class="media">
                            <blockquote>{{cmnt.comment}}

                            <footer>
                            {{cmnt.author}},{{cmnt.date | date:format:mediumDate}}
                                </footer></blockquote>
                            </div>


                        </div>

        </div>
    </div>

Answer 3

 <input ng-model="userInput"> </input> </p>
<blockquote ng-repeat="comment in dishCtrl.dish.comments | orderBy:userInput">
            {{comment.rating}} Stars
            {{comment.comment}}
     <footer>{{comment.author}} {{comment.date | date:'medium'}}</footer>
 </blockquote>

bootstrap-angular.js注释按顺序排序

3 个答案: