Как передать динамические значения в «нг-если»?

Question

У меня проблема с передачей динамических значений в " ng-if ".Если я передаю статическое значение, то оно работает, но когда я передаю динамические значения путем объединения двух переменных, это не работает.Я попытался с кодом ниже:

<ul class="list cart">
  <li class="cart_item"
      ng-repeat="product in orderInfo.products track by product.product_id"
      data-id="\{{product.product_id}}" id="items_list_{{product_id}}">
    <button
      ng-click="removeItem(product.product_id)"
      // If I pass a static value like "removed_31460" then its working.
      ng-if="removed_31460 == 'added'"
      // If tried to pass a dynamic value like below I am getting error as token not accepted.
      **ng-if="removed_+product.product_id == 'added'"**
      data-product-id="{{item_id}}"
      class="remove" data-id="\{{ product.product_id }}">
      Remove
    </button>
  </li>
</ul>

Примечание:"Удалено_31460" определено в моем app.js файле.

Вот исполняемый код:

function TodoCtrl($scope) {
    $scope.products = [
        {product_id:'123'},
        {product_id:'234'},
    ];
    let removed_id = '';
    for (let i = 0; i < $scope.products.length; i++) {
        removed_id = 'removed_'+ $scope.products[i].product_id;
        $scope[removed_id] = 'added';
    }
    $scope.removeItem = function(product_id) {
        alert('in ' + product_id);
    };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<ul class="list cart">
  <li class="cart_item" ng-repeat="product in products" data-id="\{{product.product_id}}" id="items_list_{{product_id}}">
    <button
      ng-click="removeItem(product.product_id)"
      // If I pass a static value like "removed_31460" then its working.
      ng-if="removed_23445 == 'added'"
      // If tried to pass a dynamic value like below I am getting error as token not accepted.
      **ng-if="removed_+product.product_id == 'added'"**
      data-product-id="{{item_id}}"
      class="remove" data-id="\{{ product.product_id }}">
      Remove
    </button>
  </li>
</ul>
</div>
</div>

Answer 1

Использование:

ng-if="this['removed_' + product.product_id] == 'added'"

Идентификатор this можно использовать для ссылки на $scope.

Для получения дополнительной информации см.

• AngularJS Developer Guide - Контекст выражения

---

Код можно изменить, чтобы создать хэш с именем statusById:

function TodoCtrl($scope) {
    $scope.products = [
        {product_id:'123'},
        {product_id:'234'},
    ];

    $scope.statusById = {};
    $scope.products.forEach(p => $scope.statusById[p.product_id] = 'added');

    $scope.removeItem = function(index) {
        $scope.products.splice(index,1);
        $scope.statusById[$scope.products[index].productId] = 'removed';
    };
}

Затем шаблон можетиспользуйте $index:

<li ng-repeat="product in products" id="items_list_{{product_id}}">
    <button ng-click="removeItem($index)"
            ng-if="statusById[product.product_id] == 'added'"
    >
      Remove
    </button>
</li>

Для получения дополнительной информации см.

• Справочник по AngularJS ng-repeat API - Обзор

Answer 2

Попробуйте использовать это:

ng-if="removed_[product.product_id] == 'added'"

Может быть, это поможет тебе. Будет полезно добавить JSFIDDLE .

Попробуйте следующие возможности:

ng-if=" 'removed_' product.product_id == 'added' " ( удалено в одинарных кавычках)

ng-if=" 'removed_'[product.product_id] == 'added' " ( удалено в одинарных кавычках и $ переменные области видимости в фигурных скобках)

Попробуйте это: http://jsfiddle.net/d60rm5pw/

Answer 3

Попробуйте: ng-if="removed_{{product.product_id}} == 'added'".

если вы динамически добавляете идентификатор, то привязка должна быть выше, поэтому, если идентификатор продукта равен 201, выражение будет удалено_201