ng-repeat не работает...
При нажатии на кнопку я добавляю элементы в массив и хочу увидеть список в ng-repeat. При первом нажатии все срабатывает замечательно. При втором - я вижу, что размер массива увеличился ({{data.length}}), но список не обновляется. Код программы:
<!doctype html>
<html>
<head>
<link href="../angular/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../angular/angular.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" class="ng-scope" style="background-color: Silver">
<span>{{data.length}}
<table class="table" style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{task}}
</td>
</tr>
</tbody>
</table>
</span>
<div ng-controller="ChildCtrl" class="ng-scope" style="background-color: Green">
<button ng-click="emit();">
Emit</button>
</div>
</body>
</html>
angular.module('test', [])
.controller('ParentCtrl', function($scope, $rootScope) {
$scope.data = [];
$scope.$on('something', function(event, data) {
$scope.data.push("Scope:" + data);
});
$rootScope.$on('something', function(event, data) {
$scope.data.push("rootScope:" + data);
});
})
.controller('ChildCtrl', function($scope, $rootScope) {
$scope.value = "from grandson";
$scope.emit = function() {
$scope.$emit('something', $scope.value); // вверх!
}
});
Наверное, руки кривые... Может кто подправит? |
Заинтересовался так же этим случаем... Даже в один контролеер добавление внес... Так работает, пока на твою кнопку не нажмешь... :(
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
angular.module('test', [])
.controller(
'ParentCtrl',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$scope.data = [0,1,2,3,4];
$scope.$on('something', function(event, data) {
$scope.data.push("Scope:" + data);
});
$rootScope.$on('something', function(event, data) {
$scope.data.push("rootScope:" + data);
});
$scope.add=function(){
$scope.data[$scope.data.length]=$scope.data.length;
};
}
]
)
.controller(
'ChildCtrl',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$scope.value = "from grandson";
$scope.emit = function() {
$scope.$emit('something', $scope.value); // вверх!
}
}
]
);
</script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" class="ng-scope" style="background-color: Silver">
<span>{{data.length}}</span>
<table class="table" style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{task}}
</td>
</tr>
</tbody>
</table>
<div>{{data}}</div>
<button ng-click="add();">Add</button>
<div ng-controller="ChildCtrl" class="ng-scope" style="background-color: Green">
<button ng-click="emit();">Emit</button>
</div>
</div>
</body>
</html>
Сказать, что представление не видит модели - вроде не скажешь... |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Короче - пиши маляву ангулярщикам, ежли есть мотивация, лично у меня с "активным английским" хреново. Читать по буржуински кое-как могу, писать - никак.
<!doctype html>
<html>
<head>
<!--link href="angular/bootstrap.min.css" rel="stylesheet" type="text/css" /-->
<script src="https://code.angularjs.org/1.3.9/angular.min.js" type="text/javascript"></script>
<script type='text/javascript'>angular.module('test', [])
.controller('ParentCtrl', function($scope, $rootScope) {
*!*
// $scope.data = ['asddsa','ewqwe','123432','123432','123432'];
// если раскоментируешь верхнюю строчку со $scope.data и закоментируешь нижнюю,
// то обнаружишь, что всё ломается ещё раньше - уже в момент начальной отрисовки.
// дубликаты, мать её....
*/!*
$scope.data = ['asddsa','ewqwe','123432'];
$scope.$on('something', function(event, _data) {
$scope.data.push("Scope:" + _data+'-'+$scope.data.length);
});
$rootScope.$on('something', function(event, _data) {
$scope.data.unshift("rootScope:" + _data+'-'+$scope.data.length);
});
})
.controller('ChildCtrl', function($scope) {
$scope.value = "from grandson";
$scope.emit = function() {
$scope.$emit('something', $scope.value); // вверх!
}
});
</script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" style="background-color: Silver">
<div>{{data.length}}
<table style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{$index+') '+task}}
</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="ChildCtrl" style="background-color: Green">
<button ng-click="emit();">
Emit</button>
</div>
<div><pre>{{data | json}}</pre></div>
</div>
</body>
</html>
|
Попытка запустить "с дубликатами" в версии 1.4.0, приводит к тому же результату, то бишь баг вполне актуальный.
Значит тебе сюда --> https://github.com/angular/angular.js/issues
<!doctype html>
<html>
<head>
<!--link href="angular/bootstrap.min.css" rel="stylesheet" type="text/css" /-->
<script src="https://code.angularjs.org/1.4.0-beta.5/angular.min.js" type="text/javascript"></script>
<script type='text/javascript'>angular.module('test', [])
.controller('ParentCtrl', function($scope, $rootScope) {
*!*
$scope.data = ['asddsa','ewqwe','123432','123432','123432'];
// если раскоментируешь верхнюю строчку со $scope.data и закоментируешь нижнюю,
// то обнаружишь, что всё ломается ещё раньше - уже в момент начальной отрисовки.
// дубликаты, мать её....
*/!*
// $scope.data = ['asddsa','ewqwe','123432'];
$scope.$on('something', function(event, _data) {
$scope.data.push("Scope:" + _data+'-'+$scope.data.length);
});
$rootScope.$on('something', function(event, _data) {
$scope.data.unshift("rootScope:" + _data+'-'+$scope.data.length);
});
})
.controller('ChildCtrl', function($scope) {
$scope.value = "from grandson";
$scope.emit = function() {
$scope.$emit('something', $scope.value); // вверх!
}
});
</script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" style="background-color: Silver">
<div>{{data.length}}
<table style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{$index+') '+task}}
</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="ChildCtrl" style="background-color: Green">
<button ng-click="emit();">
Emit</button>
</div>
<div><pre>{{data | json}}</pre></div>
</div>
</body>
</html>
|
Цитата:
Твои исследования сподвиги меня продолжить изыскания в этом вопросе. :D Вот полностью рабочий вариант, как можно сделать с "дубликатами"... ;)
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
angular.module('test', [])
.controller(
'ParentCtrl',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$scope.data = [
{name: 0},
{name: 1},
{name: 2}
];
$scope.$on('something', function(event, data) {
$scope.data.push({name: "Scope: " + data});
});
$rootScope.$on('something', function(event, data) {
$scope.data.push({name: "rootScope: " + data});
});
}
]
)
.controller(
'ChildCtrl',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$scope.value = "from grandson";
$scope.emit = function() {
// вверх!
$scope.$emit('something', $scope.value);
}
}
]
);
</script>
</head>
<body ng-app="test">
<div ng-controller="ParentCtrl" class="ng-scope" style="background-color: Silver">
<span>{{data.length}}</span>
<table class="table" style="background-color: White">
<tbody>
<tr ng-repeat="task in data">
<td>
{{task.name}}
</td>
</tr>
</tbody>
</table>
<div ng-controller="ChildCtrl" class="ng-scope" style="background-color: Green">
<button ng-click="emit();">Emit</button>
</div>
</div>
</body>
</html>
|
Всем большое спасибо за участие.
|
ангулярщики :D
1. либо http://learn.javascript.ru/play/6zteMb 2. либо ng-repeat="task in data track by $index" Лучше второе) А еще лучше item in items track by item.id https://code.angularjs.org/1.3.9/doc...eat#animations |
| Часовой пояс GMT +3, время: 21:37. |