Change ng-repeat value in html using javascript or angularJS

Question

When the user click on 'sort by book title' button, I would like to change "ng-repeat="x in books' to ng-repeat="x in books|orderBy:'country'" in HTML.

How can I create that action in javascript/angular?

https://jsfiddle.net/dbxtcw9w/

<section id="App2" ng-app="form-input" ng-controller="ctrl">
  <summary class="row book-component">
     <div  ng-repeat='x in books' class="col-md-12 col-sm-12 col-xs-12" >
       <img class="thumbnail-image" > 
         <div> 
            <h2 ng-bind="x.title" class="title"></h2>
            <h4 ng-bind="x.author" class="author" style="color:grey;"></h4>
            <hr>
            <h5>FREE SAMPLE <span class="review" onclick="review(this)">REVIEW</span></h5>
         </div> 
     </div>
  </summary> 
  <button style="margin-top:30px" class="btn-lg btn-success" 
  ng-click="sort()" onclick="sort()">Sort by book title</button>
</section>
<script>
  var app2 = angular.module('form-input', []);
    app2.controller('ctrl', function($scope) { 
    $scope.books=[
      {title:'Jani',author:'Norway'},
      {title:'Hege',author:'Sweden'}
    ];       
  })
</script>

stackoverflow.com/questions/14011971/…

Piotr Korlaga
– Piotr Korlaga

2015-11-10 20:11:08 +00:00
Commented Nov 10, 2015 at 20:11 — Piotr Korlaga
– Piotr Korlaga, Commented Nov 10, 2015 at 20:11

Lucas Rodrigues · Accepted Answer · 2015-11-10 20:23:40Z

1

Make the order filter equal to a variable, and then change that variable with ng-click by calling a function within the controller that receives the field as a parameter:

<section id="App2" ng-app="form-input" ng-controller="ctrl">
  <summary class="row book-component">
     <div  ng-repeat='x in books | orderBy: order' class="col-md-12 col-sm-12 col-xs-12" >
       <img class="thumbnail-image" > 
         <div> 
            <h2 ng-bind="x.title" class="title"></h2>
            <h4 ng-bind="x.author" class="author" style="color:grey;"></h4>
            <hr>
            <h5>FREE SAMPLE <span class="review" onclick="review(this)">REVIEW</span></h5>
         </div> 
     </div>
 </summary> 
 <button style="margin-top:30px" class="btn-lg btn-success" ng-click="changeOrder('title')">Sort by book title</button>
</section>

Javascript:

  var app2 = angular.module('form-input', []);
  app2.controller('ctrl', function($scope) { 
    $scope.order = 'author';
    $scope.books=[
      {title:'Jani',author:'Norway'},
      {title:'Hege',author:'Sweden'}
    ];       
    $scope.changeOrder = function (order) {
        $scope.order = order;
    };
  });

https://jsfiddle.net/dbxtcw9w/1/

edited Nov 10, 2015 at 20:23

answered Nov 10, 2015 at 20:10

Lucas Rodrigues

1,1922 gold badges11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user21 Over a year ago

Do you know how to include the javascript in external file. I tried, but it could not read the external file.

user21 Over a year ago

There is a form in which the user can fill in, to search for a book, the result of the book will then be populated on the page. However I am not able to sort that particular book. Do you know how I can add the result of that book to the $scope.books object? Please see the code below: jsfiddle.net/dbxtcw9w/2 Thanks for your time!

Lucas Rodrigues Over a year ago

Awesome. I'm not gonna be using my computer today, but I can take a look at it tomorrow

user21 Over a year ago

Hi Lucas, I got the answer from a post: stackoverflow.com/questions/33640112/…. But just wonder how to include it in external file? Thanks for looking at it. Your time is greatly appreciated!

Lucas Rodrigues Over a year ago

If I understand it right, you should add your external file as a <script> element right after loading angular and its dependencies.

Collectives™ on Stack Overflow

Change ng-repeat value in html using javascript or angularJS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related