Программных создать значение нг-шоу в нг-повторе

Question

я следующее:

<div class="row" ng-repeat="item in items " ng-cloak> 
    <div ng-show="unique{{$index}}" class="ng-hide"> 
    <button ng-click="remove('{{$index}})">Remove</button> 
    </div> 

Я хочу, чтобы создать уникальное значение для каждого элемента сНа повторяется, например, так:

<div ng-show="unique1" class="ng-hide"> 
    <button ng-click="remove('unique1')">Remove</button> 
<div ng-show="unique2" class="ng-hide"> 
    <button ng-click="remove('unique2')">Remove</button> 

так что в моем контроллере я могу иметь действие, в данном случае remove(), которое будет переключать этот атрибут.

scope.remove = function(uniqueAttribute) { 
    $scope[uniqueAttribute] = false; 

}

Я был в состоянии генерировать HTML, используя $ индекс, но этот код не работает, и я уверен, не уверен, как идти о выполнении этого.

Answer 1

Большинство атрибутов в угловых либо оценивали или интерполированное. Оценка похожа на ограниченную форму eval(), интерполяция - это когда заполняются двойные фигурные фигурные скобки. Похоже, вы ожидаете, что ng-show будет интерполировать, а затем оценить, но ни одна из встроенных директив не делает этого. Они делают то или другое, но не оба. Для ng-show конкретно это просто оценка, поэтому ваши фигурные скобки проходят буквально. Это было бы недопустимым выражением.

Мое предложение заключается в следующем: Поскольку ng-repeat создает новую область для каждого повторяющихся, вы можете просто сделать это:

<div class="row" ng-repeat="item in items" ng-cloak> 
    <div ng-show="!hide" class="ng-hide"> 
    <button ng-click="hide = true">Remove</button> 
</div> 

Конечно, зачем держать кучу скрытых элементов вокруг. Почему бы не указать ng-click="remove(item)" и удалить функцию, которая удаляет элементы? Затем обновляется ng-repeat.

$scope.remove = function(item) { 
    var index = this.items.indexOf(item); 
    if (index != -1) { 
    this.items.splice(index); 
    } 
}; 

Или что-то в этом роде.

Answer 2

К каждому объекту можно добавить новое поле под названием show, а затем вы можете устранить всю логику, относящуюся к $index.

<div ng-app ng-controller="Ctrl"> 
    <div class="row" ng-repeat="item in items" ng-cloak> 
     <div ng-show="item.show"> 
      <button ng-click="remove(item)">Remove</button> 
     </div> 
    </div> 
</div> 

function Ctrl($scope) { 
    $scope.items = [{ 
     item1: 1, 
     show: true 
    }, { 
     item1: 2, 
     show: true 
    }, { 
     item1: 3, 
     show: false 
    }]; 

    $scope.remove = function (item) { 
     item.show = false; 
    } 
} 

DEMO

Answer 3

Вам не нужно использовать {{ }} в атрибутах угловых в. Он автоматически оценит ваши области применения.

<div class="row" ng-repeat="item in items" ng-cloak> 
    <div ng-show="'unique' + $index" class="ng-hide"> 
    <button ng-click="remove('unique' + $index)">Remove</button> 
    </div>