What is the most effective method for populating data within a browser window?

Question

What is the most effective method for populating data within a browser window?

I have a list of files stored in $scope.data that I retrieved from the searchFactory. Now, my goal is to display these files in the browser window. How can I accomplish this task?

ctrl.js

$scope.displayFiles = function (){     
   $window.open($scope.data = angular.copy(searchFactory.getDitLogs()));
   console.log("Function executed successfully:", $scope.data);
};

main.html

<button
   type="button"
   class="btn btn-info btn-lg"
   ng-click="displayFiles()"
   style="margin-left: 10px">
   <span class="glyphicon glyphicon-folder-close"></span>
</button>

javascript angularjs browser

Answer 1

Answer №1

Set $scope.data as an empty array and then connect it to your display so that any changes will automatically be reflected. It should look something like this:

angular.module("app", [])
.controller('main', function($scope){
  $scope.data = [];
  
  $scope.serverFiles = function(){
     //dummy record 
    for(i=0;i<10; i++)
      $scope.data.push({sn:(i+1),name:'name of file'+i, file:'file info'+i});
    };
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  
  <div ng-controller="main">
<ul>
 <li ng-repeat = "info in data"><strong>{{info.sn}}</strong> {{info.name}} </li> 
 </ul>

<button ng-click="serverFiles()">Fetch Record</button>
  </div>
  
  </div>

Any changes made to the $scope.data will instantly update the display.

Answer 2

Set $scope.data as an empty array and then connect it to your display so that any changes will automatically be reflected. It should look something like this:

angular.module("app", [])
.controller('main', function($scope){
  $scope.data = [];
  
  $scope.serverFiles = function(){
     //dummy record 
    for(i=0;i<10; i++)
      $scope.data.push({sn:(i+1),name:'name of file'+i, file:'file info'+i});
    };
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  
  <div ng-controller="main">
<ul>
 <li ng-repeat = "info in data"><strong>{{info.sn}}</strong> {{info.name}} </li> 
 </ul>

<button ng-click="serverFiles()">Fetch Record</button>
  </div>
  
  </div>

Any changes made to the $scope.data will instantly update the display.

What is the most effective method for populating data within a browser window?

Answer №1

Similar questions

What is preventing me from navigating to other pages in my React application?

Ways to set up various Content-Security-Policies and headers in your application?

Issues with AngularJS Opening the Datepicker upon Click

The content at “http://localhost:3000/script.js” could not be accessed because of a MIME type mismatch with the X-Content-Type-Options set to nosniff

worldpay implements the useTemplateForm callback function

Identify the index of a list item using a custom list created from buttons

Having difficulty retrieving objects within a foreach loop of object keys that do not meet the criteria of the string.prototype.replace method

The website is having trouble reading the local json file accurately

What is the best approach for making a drawer resizable?

Show off a sleek slider within a Bootstrap dropdown menu

Navigating between socket.io and express using while loops

Detect Flash Player Event using Javascript

In Vue.js, I only want to retrieve and display the parent's ID or name once for each of its child components

Using AngularJS Typeahead with restrictions on $http requests

Transform an array containing objects into a single object

How can I identify when a node/express ajax request is received?

What is the proper type declaration for incoming data from the backend in my TypeScript code when using axios?

Can AngularJS integrate ExtJS components for web development?

How can I efficiently pass a JavaScript object to a function using jQuery syntax?

Steps for moving data from a JavaScript variable to a Python file within a Django project