Почему при ng-click + ng-repeat изменяются значения в каждом репите, а не в текущем?

Question

[GaserV]

Подскажите. Почему при ng-click + ng-repeat изменяются значения в каждом репите, а не в текущем? Мне нужно, чтобы например при клике у меня раскрывался только текущий ответ на вопрос, а не везде. И еще такая проблема. Если вопрос один, то он скрыт, а по клику ответ на него раскрывается. Но если два и более то они сразу все открыты... Что это такое? Как исправить? Подскажите пожалуйста. Весь вечер уже туплю сижу...

<section class="content">
	<div class="section-header">
		<div class="section-title">
			Акции<span class="arrow-right"></span><span class="back-link hidden right"><  Назад</span>
		</div>
		<div ng-show="showClients" class="section-btn-create">
			<button class="btn1" onclick="showAddForm()">Добавить</button>
		</div>
	</div>
	<div class="signs">	
		<div ng-repeat="sign in signs" class="sign">	
			<div ng-click="sign.opened = !sign.opened" class="options-title">СКИДКА 20.16%</div>
			<div ng-class='{"sign_opened":sign.opened}' class="signs-content">
				<form ng-submit="updateSign()">
					<input ng-model="formData.title" class="btn1" name="title" type="text" placeholder="{{ sign.title }}"><br>
					<input ng-model="formData.subtitle" class="btn1" name="subtitle" type="text" placeholder="{{ sign.subtitle }}"><br>
					<input ng-model="formData.offdate" class="btn1" name="off-date" type="text" placeholder="{{ sign.odate }}"><br>
					<textarea ng-model="formData.shortdesc" class="btn1" name="short-desc" placeholder="Краткое описание"></textarea><br>
					<textarea ng-model="formData.fulldesc"  class="btn1" name="full-desc" id="" placeholder="Полное описание"></textarea><br>
					<label class="label-input-file" for="preview-image">Превью изображение:</label>
					<input ng-model="formData.previewimage" id="preview-image" class="input-file" name="preview-image" type="file"><br>
					<label class="label-input-file" for="full-image">Полное изображение:</label>
					<input ng-model="formData.fullimage" id="full-image" class="input-file" name="full-image" type="file"><br>
					<label class="label-input-file work-examples">Примеры работ:</label>
					<span ng-click="createField(sdf)" class="add-ico">+</span><br>
					<div ng-repeat="field in sign.fields">
						<label class="label-input-file" for="example-image">Изображение {{ field.id }}</label>
						<input ng-model="formData.exampleimage" id="example-image" class="input-file" name="example-image{{ field.id }}" type="file"><br>	
					</div>
					<input class="submit-input" type="submit" value="Изменить">
				</form>
			</div>
		</div>
	</div>
</section>

$scope.signs = 
	[
		{

			title: "title",
			subtitle: "subtitle",
			stext: "text",
			ftext: "text",
			odate: "23.12.2016",
			fields: [{id: "1"},{id: "2"}]

		}
];

	$scope.createField = function(sdf) {
	    var lastId = sdf.length;
	    var newId = lastId + 1   
	    
	    sdf.push({'fields.id' : newId});
	    console.log(sdf)
	};

Comments

[Alex XYZ]

Вы точно правильно написали:

<div ng-repeat="sign in signs" class="sign">	
<div ng-click="signs=!signs" class="options-title">СКИДКА 20.16%</div>

Меня смущает этот момент:
sign in signs
и следом
signs=!signs
Что-то тут не то... ведь sings - это, вроде, массив.

[Dmitriy Uvarov]

Возможно проблема в области видимости, раз изменения происходят в каждом элементе, проверьте контроллер, получает ли каждый элемент свою область видимости, в ней ли происходят изменения. Маловато информации поступило в примере

[GaserV]

Захаров Александр: Дмитрий Уваров: отредактировал. Ничего не изменилось.

[GaserV]

Сейчас ситуация следующая. При клике на название акции - показывает содержимое нужной мне акции. Внутри есть кнопка для добавления полей. Так вот. Если на неё нажать, то она добавляет поле не только в текущую акцию, но и во все на странице. Как править?

[Alex XYZ]

GaserV: HTML мало даёт информации. Посмотреть бы контекстные функции. Но на будущее не советую объявлять функции сразу в контексте, лучше так:

$scope.createField = function(){
}
// Лучше сделать так:
$scope.context = {
        createField: function(){
        }
}

и тогда вызов будет выглядеть так:

<span ng-click="context.createField()" class="add-ico">+</span><br>

Бывает, что без такого "описания" контексты как-то по хитрому смешиваются и вызывают не свои функции.
Кроме того, посмотрите расширение хрома https://chrome.google.com/webstore/detail/angular-... - поизучайте, что у вас с контекстами вообще.

[GaserV]

Захаров Александр: добавил скрипт добавления поля. Как мне сделать, чтобы он добавлял поле именно в эту акцию?)

[Alex XYZ]

У вас fields общий для всех акций!!! А должен быть у каждой акции свой!!! Например:

// не так:
$scope.fields = [
      {id:'1'}
  ];
// а вот так:
$scope.signs = [
        { fields: [ {id:'1' ], /* другие поля*/}, // первая акция
        { fields: [ {id:'2' ], /* другие поля*/}, // вторая акция
        { fields: [ {id:N ], /* другие поля*/}, // N-я акция
];
// и добавлять акции нужно/можно теперь в конкретную акцию:
$scope.createField = function(sign) {
    var lastId = sign.length; // а не $scope.fields.length
    var newId = lastId + 1;
    sign.fields.push({  // а не $scope.fields.push({
      id: newId
    })
  };

Тогда в html:

<span ng-click="createField(sign)" class="add-ico">+</span><br>
          <div ng-repeat="field in sign.fields" > <!-- было field in fields -->
            <label class="label-input-file" for="example-image">Изображение {{ field.id }}</label>
            <input ng-model="formData.exampleimage" id="example-image" class="input-file" name="example-image{{ field.id }}" type="file"><br>	
          </div>

[GaserV]

Захаров Александр: { fields: [ {id:'1' ], ругается ... app.js:107 Uncaught SyntaxError: Unexpected token ]

[Alex XYZ]

GaserV: Коллега, я написал пример. Не проверял, но вы должны не просто скопировать его, а сделать это с умом, понимая, что за структуру вы обрабатываете. В данном случае добавьте перед ] фигурную скобку }, чтобы получилось }]

[GaserV]

Захаров Александр: я уже запутался блин... Пришлось поменять на signFields т.к. sign у меня уже есть, это массив с названиями акций. Вот код. Здесь он говорит что мол не возможно вычислить length, типа 0 возвращает.

i013.radikal.ru/1603/3b/4b2c65edc57a.png
s008.radikal.ru/i305/1603/7f/9f1568e73649.png

[GaserV]

Захаров Александр: "В данном случае добавьте перед ] фигурную скобку }, чтобы получилось }]" это я почти сразу и сделал) исправил)

[Dmitriy Uvarov]

Я могу ошибаться, но вопрос с областью видимости еще не решен, все элементы все еще находятся в одной $scope, функция соответственно общая. Если Вам нужно разное поведение объектов, которые вы перебираете и выводите, то наделите методами и полями каждый объект, тогда вы сможете работать с ним отдельно. Не до конца понимаю Вашу конечную задачу, чего точно Вы хотите добиться?

[GaserV]

Дмитрий Уваров: $scope.sdf = [
{ fields: [ {id:'1' }] },
{ fields: [ {id:'2' }] }
];

$scope.createField = function(sdf) {
var lastId = sdf.length;
sdf.push(newId);
var newId = lastId + 1;
console.log(newId);
console.log(sdf);
};

[GaserV]

Дмитрий Уваров: Для вывода прохоусь как ng-repeat="field in sdf.fields" и и ничего не выводится, т.к. вывел в консоль sdf - undefined

[GaserV]

Дмитрий Уваров: Изображение {{ field.id }} Вот это вот не выводится

[GaserV]

Дмитрий Уваров: я реализовываю грубо говоря что-то вроде todo list.

[Dmitriy Uvarov]

В примере кода по вашему $scope разные что ли? Вы работаете с одной областью, наделили ее методом и полем. А вам надо, чтобы каждый объект, хранящийся в списке, обладал бы своей $scope, где были бы методы добавления и демонстрации. Тогда Вам нужно будет в repeat пройти список, представить полученный объект для каждой итерации, а уже вызовы методов будут работать с этим объектом: удалять, показывать и т. д.

[GaserV]

Дмитрий Уваров: можно пример?) у меня к полудню уже мозги вываливаются. Запутался окончательно

[GaserV]

Дмитрий Уваров: вообщем практически решил проблему. Но новые поля по-прежнему добавляются везде

[GaserV]

Дмитрий Уваров: а нет. показалось. Да кароче это ЖЖЖЖЖ. Сил уже нету

Answer 1

[rakro]

Вы пушите в массив fields. Выводите его в каждом репите. Один и тот же массив. Какое поведение ожидается? Если вам нужно чтобы массив fields был индивидуален для каждого sign, так поместите его в sign, а не scope.