Question

我有一个与页面加载一起运行的控制器。我想改变它，所以只有在点击一个按钮后，该函数才会被调用并显示结果。

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;
     });
});

Answer 1

我认为你需要将你的http调用放在一些激活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>

控制器：

   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;
   });
}

Answer 2

使用带有按钮的ng-click来定义要在点击时调用的函数，并在该函数内调用$http.get。

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

在您的控制器中

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

Answer 3

喜欢那样：
的 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脚本

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; }); }; });

Answer 4

您可以简单地切换可见性。这样，您可以预先加载数据并在需要时显示。

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

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

我从ul删除了ng-controller指令。我会把它放在包含所有其他元素的更高级元素上。

Answer 5

最好只对服务器进行一次调用，这样就可以从头开始获取数据了。

您可以切换可见性，而不是拨打API。

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

将显示减速为：

vm.display = false;

为什么要否定？

使用该标签将切换li元素的可见性。

仅在单击按钮后才显示角度显示ng-repeat

5 个答案:

为什么要否定？