数据绑定如何在AngularJS框架中工作？
我没有在他们的网站上找到技术细节.当数据从视图传播到模型时,它或多或少清楚它是如何工作的.但是AngularJS如何在没有setter和getter的情况下跟踪模型属性的变化？
我发现有一些JavaScript观察者可以做这项工作.但Internet Explorer 6和Internet Explorer 7不支持它们.那么AngularJS如何知道我改变了例如以下内容并在视图上反映了这一变化？
myobject.myproperty="new value";
我已经尝试查看他们的文档的Mozilla JSON stringify页面以及SO和Google,但没有找到任何解释.我已经多次使用JSOn stringify但从未遇到过这个结果
我有一个JSON对象数组
[
{
"param_2": "Description 1",
"param_0": "Name 1",
"param_1": "VERSION 1"
},
{
"param_2": "Description 2",
"param_0": "Name 2",
"param_1": "VERSION 2"
},
{
"param_2": "Description 3",
"param_0": "Name 3",
"param_1": "VERSION 3"
}
]
附加到我$scope和POST他们作为一个参数我使用JSON.stringify()方法,我得到以下内容:
[
{
"param_2": "Description 1",
"param_0": "Name 1",
"param_1": "VERSION 1",
"$$hashKey": "005"
},
{
"param_2": "Description 2",
"param_0": "Name 2",
"param_1": "VERSION 2",
"$$hashKey": "006"
},
{
"param_2": "Description 3",
"param_0": "Name …我试图允许用户使用ngRepeat和编辑项目列表ngModel.(看到这个小提琴.)但是,我尝试过的两种方法都会导致奇怪的行为:一个不更新模型,另一个模糊每个keydown上的形式.
我在这里做错了吗？这不是支持的用例吗？
以下是小提琴的代码,为方便起见而复制:
<html ng-app>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-init="names = ['Sam', 'Harry', 'Sally']">
<h1>Fun with Fields and ngModel</h1>
<p>names: {{names}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="name in names">
Value: {{name}}
<input ng-model="name">
</div>
<p class="muted">The binding does not appear to be working: the value in the model is not changed.</p>
<h3>Indexing into the array:</h3>
<div ng-repeat="name in names">
Value: {{names[$index]}}
<input ng-model="names[$index]">
</div>
<p class="muted">Type one character, and the input …我想弄清楚如何动态地创建bootstrap行的div一类row-fluid与angular.js使用的ng-repeat指令.
这是角度:
<div ng-repeat="task in tasks" class="row-fluid">
<div class="span6 well">{{task.name}}</div>
</div>
这并没有工作,虽然.bootstrap我希望生成的HTML是:
基本上我需要在ng-repeat内部做索引的mod 2,如果是0,关闭</div>并创建一个新的<div class="row-fluid">.这怎么可能？
我试图在控制器中使用一个函数来返回数据,这样我就可以在应用程序中重用该函数来调用数据并偶尔刷新它.
我的代码看起来是正确的,但实际上,在每次加载时都会崩溃浏览器.
我能够通过使用E指令然后将元素放在部分中来使其工作,但这不能实现我所需要的.
最终,我想做这样的事情:
<div ng-repeat="user in getListUsers()">{{ user.somedata }}</div>
我已经尝试了各种各样的东西让它在测试中工作,包括将$ http放在控制器中,所有都具有相同的结果.
如果我在控制器方法中分配一个变量而不是返回数据,那可行,但是我需要在控制器中调用该方法,我不希望它默认运行.只是想在需要时在模板中进行调用.
任何帮助弄清楚为什么这不起作用将是伟大的.谢谢.
这就是我的功能......
elite.controller('UserController', function($scope, User){
$scope.getListUsers = function(){
User.listUsers().then(function(response){
return response.users;
});
}
});
elite.factory('User', function($http){
var User = {
getUser: function(id){
return $http.get('/user/' + id + '/settings').then(function(response){
return response.data;
});
},
listUsers: function(){
return $http.get('/user/').then(function(response){
return response.data;
});
}
}
return User;
});
编辑:
使用下面的一些想法,我能够以不同的方式获得我想要的功能.基本上,我希望数据按需加载,而不是预先加载,因为我试图将该控制器中的所有用户逻辑分组,并且我不希望为每个用户加载完整数据.我暂时使用$ rootScope,直到我找出一些范围继承问题,因为使用$ scope.users在模板中以空值结束.我可以看到AJAX呼叫回来,但不知道它在哪里,但这是另一个问题.
elite.controller('UserController', function($scope, $rootScope, User){
$scope.getListUsers = function(){
User.listUsers().then(function(response){
$rootScope.users = response.users;
});
};
});
在nav元素中我有这个:
<div ng-controller="UserController">
<a ng-href="/#user/list" …这是我的代码:
<h1 ng-repeat="item in func()">something</h1>
$scope.func = function(){
return [{"property" : "value1"},{"property": "value2"}];
}
在Angular.js v.1.1.1中,没有错.在Angular.JS v 1.2.1中,我得到了一个infDig错误.
你能解释一下这种情况吗？非常感谢.
infinite-loop angularjs angularjs-ng-repeat angularjs-infdig
我疯了 这个hello-worldesque例子有什么不对？我正在尝试用angularjs 1.5.5测试一些基本的东西.
HTML:
<div ng-app="myApp" ng-controller="Ctrl">
<h3>test 1:</h3>
<span ng-repeat="label in test(1)">{{label}}</span>
<h3>test 2:</h3>
<span ng-repeat="label in test(2)">{{label}}</span>
</div>
JS:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.test = function(amount) {
var result = [];
result.push("1");
for (var i = 0; i < amount; i++) {
result.push("2");
}
result.push("3");
return result;
}
}]);
JsFiddle:http://jsfiddle.net/d3v6vq7w/7/
Simpy put,循环使用1次迭代,但不是例如2.没有任何东西被打印.是什么赋予了？
我想在ng-repeat属性中调用函数,这是我的代码
HTML
<body ng-controller="mainCtrl">
<div ng-repeat='item in getGroupedRange() track by item.id'>
<span>{{item.val}}</span>
<span>{{item.abs}}</span>
<span>{{item.rel}}</span>
<span>{{item.cum}}</span>
</div>
</body>
JS
$scope.getGroupedRange = function() {
return [
{
val: 1,
abs: 1,
rel: 1,
cum: 1,
id: 123456
}
];
};
当我打开控制台时,我注意到了错误
10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":9,"oldVal":8}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":10,"oldVal":9}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":11,"oldVal":10}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":12,"oldVal":11}],[{"msg":"fn: function (c,d,e,f){e=a(c,d,e,f);return b(e,c,d)}","newVal":13,"oldVal":12}]]
我的代码的主要目标是使用ng-repeat中的函数来计算每个事件循环中的数据
尝试对动态创建的集合进行ng重复时会出现问题:Angular将以10 $digest() iterations reached. Aborting!错误循环
我用这个例子将问题简化为最小化
<body ng-init='a = [1, 2, 3]'>
<div ng-repeat="item in a.reverse()">{{item}}</div>
</body>
这是它在Plunkr中的工作副本(View显示正确的结果,但在控制台中你会看到上面提到的错误.更复杂的例子完全失败)
如果它可能有任何区别,则认为[1,2,3]可以是对象数组
所以问题是为什么会这样,是否有一个简单的方法来解决这个问题？
谢谢
我是AngularJS的新手,我正在尝试学习更多关于ng-repeat的可能性.我已经整理了一些代码来尝试学习更多但是我遇到了一些我不理解的问题.
这是代码:
HTML:
<ul class="list-unstyled">
<li ng-repeat="worker in workers">
<section class="well col-md-6 col-md-offset-3">
<h1 class="h3 col-md-6 text-right" style="margin-top: 0"><a>{{worker.worker_name}} {{ getTipCount(worker.id) }}</a></h1>
</section>
</li>
</ul>
在我的控制器中:
$scope.getTipCount = (workerId) ->
WorkerTips = $resource("/workers/#{workerId}", { workerId: "@id", format: 'json' })
json = WorkerTips .get ((res) ->
$scope.workertipscount = res.worker.tips.lengh
)
在JSON中,每个工作者对象都有一系列提示,我想要做的是获得每个工作者有多少提示的计数.要做到这一点,我需要通过ng-repeat从worker获取id,然后将其传递给一个函数,然后从JSON中获取提示计数并将其显示在页面上.
但是,当我尝试这样做时,看起来页面进入无限循环,我得到以下错误:
错误:[$ rootScope:infdig] 10 $ digest()迭代达成.中止!
所以我猜测我的方法是从ng-repeat中的元素中提取信息,然后将它发送到也被发送到ng-repeats视图的函数是不正确的？如果是这样,AngularJS的正确方法是什么？