背景
我有一个最基本的“新手”AngularJS问题,请原谅我的无知:如何通过代码刷新模型?我确信这个问题在某个地方已经回答了很多次,但我就是找不到它。我在http://egghead.io上看了一些很棒的视频,快速浏览了一下教程,但我仍然觉得我遗漏了一些非常基本的东西。
我找到了一个相关的示例here ($route.reload()
),但我不确定如何在下面的示例中使用它
这是设置
controllers.js
function PersonListCtrl($scope, $http) {
$http.get('/persons').success(function(data) {
$scope.persons = data;
});
}
index.html
...
<div>
<ul ng-controller="PersonListCtrl">
<li ng-repeat="person in persons">
Name: {{person.name}}, Age {{person.age}}
</li>
</ul>
</div>
...
这一切都运行得非常好,每次页面重新加载时,我都会看到预期中的人员列表
问题
假设我想要实现一个刷新按钮,我如何告诉模型重新加载programmatically?
我确信我遗漏了一些基本的东西,但在花了一个小时试图弄清楚它之后,我认为它值得一个问题。请告诉我它是否重复,我将关闭它的+链接。
发布于 2013-02-05 03:22:55
你自己已经走到一半了。要实现刷新,只需将已有内容包装在作用域上的函数中:
function PersonListCtrl($scope, $http) {
$scope.loadData = function () {
$http.get('/persons').success(function(data) {
$scope.persons = data;
});
};
//initial load
$scope.loadData();
}
然后在你的标记中
<div ng-controller="PersonListCtrl">
<ul>
<li ng-repeat="person in persons">
Name: {{person.name}}, Age {{person.age}}
</li>
</ul>
<button ng-click="loadData()">Refresh</button>
</div>
至于“访问您的模型”,您需要做的就是访问控制器中的$scope.persons数组:
例如(只需puedo代码)在控制器中:
$scope.addPerson = function() {
$scope.persons.push({ name: 'Test Monkey' });
};
然后你可以在你的视图中使用它,或者做任何你想做的事情。
发布于 2015-06-01 00:52:43
在我展示如何以编程方式从服务器重新加载/刷新模型数据之前?我必须向您解释数据绑定的概念。这是一个非常强大的概念,它将真正彻底改变您的开发方式。因此,为了理解AngularjS的工作原理,您可能必须阅读这篇link或this seconde link中的概念。
现在,我将向您展示一个示例,解释如何从服务器更新模型。
HTML代码:
<div ng-controller="PersonListCtrl">
<ul>
<li ng-repeat="person in persons">
Name: {{person.name}}, Age {{person.age}}
</li>
</ul>
<button ng-click="updateData()">Refresh Data</button>
</div>
所以我们的控制器命名为:PersonListCtrl,我们的模型命名为:persons。转到您的控制器js,以便开发名为:updateData()
的函数,当我们需要更新和刷新模型人员时,将调用该函数。
Javascript代码:
app.controller('adsController', function($log,$scope,...){
.....
$scope.updateData = function(){
$http.get('/persons').success(function(data) {
$scope.persons = data;// Update Model-- Line X
});
}
});
现在我为你解释它是如何工作的:当用户点击按钮刷新数据时,服务器将调用函数updateData(),在这个函数中,我们将通过函数$http.get()
调用我们的web服务,当我们从ws得到结果时,我们将影响它到我们的模型(行X).Dice,这将影响我们的模型的结果,我们的这个列表的视图将随着新的数据而改变。
https://stackoverflow.com/questions/14693815
复制相似问题