Update the ng-repeat attribute in HTML using either vanilla JavaScript or AngularJS

Question

Update the ng-repeat attribute in HTML using either vanilla JavaScript or AngularJS

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

How can I achieve this action using JavaScript/Angular?

Here is a link to the code

<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>

javascript angularjs sorting filter

Answer 1

Answer №1

Set the order filter as a variable, then update that variable using ng-click to invoke a controller function that takes the field as an argument:

<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/

Answer 2

Set the order filter as a variable, then update that variable using ng-click to invoke a controller function that takes the field as an argument:

<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/

Update the ng-repeat attribute in HTML using either vanilla JavaScript or AngularJS

Answer №1

Similar questions

Retrieving the ID from the element that was clicked

The if-else statement doesn't seem to be functioning correctly once the else condition is included

Adjusting the tab order dynamically within a navigation menu

Is sending cookies the sole method to convey a directive from a server to a client for the execution of JavaScript code?

Create HTML content from a file retrieved from the server

The issue persists as the Ajax request continues to return false

Ways to target only the adjacent div

Deactivate the button while you wait for the Google Maps directionService

Is there a distinction in functionality when utilizing fat arrow syntax versus traditional syntax for ES6 class methods and React?

Ways to avoid extra function loads in JavaScript

Angular: failure to update a specific portion of the view

The following working day with Moment.js

Analyzing the original data form versus the modified data

Unable to generate a fresh directory with mongoose and express

AngularJS tips for resolving an issue when trying to add duplicates of a string to an array

Access scope information when clicking with ng-click

Eliminating the impact of a CSS selector

Create an array populated with unclosed HTML tags that need to be rendered

Error: Attempting to access properties of an undefined object (specifically 'query')

Vue3 - Implementing a seamless communication channel between two child components