CODEWITHSUNDEEP
javascripthtmlangularjs
Gilo
Gilo

Reputation: 720

angular display ng-repeat only after clicking a button

I have a controller that runs with the page load. I would like to change it, so only after clicking a button the function will called and the results will be displayed.

HTML: 

<div ng-controller="MyController">Files on server: {{ mydata }}
</div>

<ul ng-controller="MyController as controller">
    <li ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>

JS:

app.controller('MyController', function($http) {
var vm = this;
vm.mydata = [];

$http.get('list')
    .then(function(result) {
      console.log(result);
      vm.mydata = result.data;
     });
});

Upvotes: 0

Views: 268

Answers (5)

Alan Torres
Alan Torres

Reputation: 125

It´s better to make only one call to the server, so you could get the data from the beginning.

You could toggle the visibility instead of making an api call.

<ul ng-controller="MyController as controller">
    <a href="#" ng-click="controller.display == !controller.display">
      Toggle Info
    </a>
    <li ng-if="controller.display" ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>

And decelerate the display as:

vm.display = false;

Why the negation?

With that the a tag will toggle the visibility of the li elements.

Upvotes: 0

Yatrix
Yatrix

Reputation: 13785

You could simply toggle the visibility. That way you can load the data upfront and show it when you want to. 

<ul ng-if="!controller.hide">
    <li ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>

<button ng-click="controller.hide=false">Show Me!</button>

I removed the ng-controller directive from your ul. I would put that on a higher level element that wraps all of the other elements.

Upvotes: 0

Saksham
Saksham

Reputation: 9380

Use ng-click with a button to define a function to be called on click and call your $http.get inside that function.

<button ng-click="myFunction()">Click</button>

And in your controller

vm.myFunction = function() {
    $http.get('list').then(function(result) {
        console.log(result);
        vm.mydata = result.data;
     });
});

Upvotes: 0

happyZZR1400
happyZZR1400

Reputation: 2405

i think you need to put your http call in some function activated onclik

HTML:

<div ng-controller="MyController as controller">
 <ul>
   <li ng-repeat="data in controller.mydata">{{ data }}</li>
 </ul>
 <button ng-click="controller.getData()">get data</button>
</div>

controller:

   app.controller('MyController', function($http) {
 var vm = this;
 vm.mydata = [];
 //http call is in the 'getData' function
 vm.getData = function(){
  $http.get('list')
  .then(function(result) {
    console.log(result);
    vm.mydata = result.data;
   });
}

Upvotes: 1

Daniel Taub
Daniel Taub

Reputation: 5379

Like that :
HTML

    <div ng-controller="MyController">Files on server: {{ mydata }}
</div>
<input type="button" value="Click" id="refresh"/>
<ul ng-controller="MyController as controller">
    <li ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>

Java script

app.controller('MyController', function ($http) {
    var vm = this;
    vm.mydata = [];

    vm.refresh = function () {
        $http.get('list')
            .then(function (result) {
                console.log(result);
                vm.mydata = result.data;
            });
    };
});

Upvotes: 0

Related Questions