Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   ng-repeat не работает... (https://javascript.ru/forum/angular/53955-ng-repeat-ne-rabotaet.html)

YuriT64 25.02.2015 15:18

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); // вверх!
    }
});


Наверное, руки кривые... Может кто подправит?

ksa 25.02.2015 15:47

Заинтересовался так же этим случаем... Даже в один контролеер добавление внес... Так работает, пока на твою кнопку не нажмешь... :(

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

Сказать, что представление не видит модели - вроде не скажешь...

ksa 25.02.2015 15:51

Цитата:

Сообщение от YuriT64
Может кто подправит?

Моя кнопка (добавление в том же контроллере) работает на добавление.

YuriT64 25.02.2015 17:39

Цитата:

Сообщение от ksa (Сообщение 358383)
Моя кнопка работает на добавление.

Это, конечно, замечательно, что в некоторых случаях angular все таки работает :haha:. Но вопрос был "почему не работает в моем случае"? Это у меня руки кривые или angular кривой?

ksa 25.02.2015 19:28

Цитата:

Сообщение от YuriT64
вопрос был "почему не работает в моем случае"?

Пока у меня нет ответа... Поскольку все "перехватчики" получают управление и массив меняется. :(

MetaDriver 26.02.2015 01:50

Цитата:

Сообщение от YuriT64 (Сообщение 358411)
Это, конечно, замечательно, что в некоторых случаях angular все таки работает :haha:. Но вопрос был "почему не работает в моем случае"? Это у меня руки кривые или angular кривой?

Круто. Похоже на баг в ангуляре. ngRepeat не хочет выводить"дубликаты". Просидел больше часа, удалось заставить работать, только после того как заставил элементы массива быть уникальными. В некоторых случаях может сойти за фичу, но таки "предупреждать же нада, господа разработчики....!!! ".
Короче - пиши маляву ангулярщикам, ежли есть мотивация, лично у меня с "активным английским" хреново. Читать по буржуински кое-как могу, писать - никак.
<!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>

MetaDriver 26.02.2015 02:14

Попытка запустить "с дубликатами" в версии 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>

ksa 26.02.2015 08:34

Цитата:

Сообщение от MetaDriver
gRepeat не хочет выводить"дубликаты"

А мне вот не дает пока плюсануть... :-/

Твои исследования сподвиги меня продолжить изыскания в этом вопросе. :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>

YuriT64 26.02.2015 09:35

Всем большое спасибо за участие.

nerv_ 26.02.2015 10:17

ангулярщики :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, время: 10:35.