Как передать динамические значения в «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>
Примечание: "removed_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>product.product_id получает из li ng-repeat, а не из $scope.
О, да. Тем не менее, это эквивалентно $scope.removed_ + product.product_id == 'added'. Все еще не то, что вы хотите, я думаю.
HTML-код выше находится в моих обработчиках и $scope в app.js. Если я объявлю «removed_31460» добавленным в $scope, я смогу напрямую использовать «removed_31460» в своих обработчиках. Во всяком случае, я попытался, как вы сказали, но все равно не повезло.
removed_) не существует. Если вы хотите получить доступ к переменной по имени, используйте Map.
Ответы 3
Попробуйте: ng-if = "removed_{{product.product_id}} == 'added'".
если вы динамически добавляете идентификатор, то привязка должна быть выше, поэтому, если идентификатор продукта равен 201, выражение будет удалено_201
Я тоже устал, как и выше, но я получаю <!-- ngIf: removed_ == 'added' -->. Нет productID после удаленный_
вы HTML как шаблон или что-то вроде пыли и т. д.? Вы можете распечатать свой productID в html и увидеть его, то есть не внутри кнопки attr, распечатать product.product_id и посмотреть, придет ли значение. сделай скрипку и поделись
JsFiddle: jsfiddle.net/pguhL2es
Зачем это пробовать? Пожалуйста, добавьте некоторые пояснения к этому коду, чтобы другие могли извлечь из него уроки.
@ajaj: ты пытаешься показать и скрыть кнопку в скрипке? не в состоянии получить то, что вы хотите достичь в скрипке
Попробуйте использовать это:
ng-if = "removed_[product.product_id] == 'added'"
Может быть, это поможет вам. Добавление JSFIDDLE будет полезно.
Попробуйте следующие возможности:
ng-if = " 'removed_' product.product_id == 'added' "
(удаленный в одинарных кавычках)
ng-if = " 'removed_'[product.product_id] == 'added' "
(удаленный в одинарных кавычках и переменные $scope в фигурных скобках)
Попробуй это : http://jsfiddle.net/d60rm5pw/
Я помню, как использовал этот код где-то. Если бы вы могли предоставить JSFIDDLE?
Поместите удаленный в одинарные кавычки ng-if = " 'removed_' product.product_id == 'added' "
привет, @AjayReddy, посмотри: ng-if = "'removed_'product.product_id == 'добавлено'"
Давайте продолжить обсуждение в чате.
И как это сделать? Я думаю, что ваша проблема решена с помощью последнего кода, который я предоставил. Если это так, пожалуйста, проголосуйте. :)
Еще не решен. Пожалуйста, проверьте ссылку jsfiddle, которую я отправил
Использовать:
ng-if = "this['removed_' + product.product_id] == 'added'"
Идентификатор this может использоваться для обозначения $scope.
Для получения дополнительной информации см.
Код можно изменить, чтобы создать хэш с именем 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>
Для получения дополнительной информации см.
Это не работает, потому что это не работает и в JavaScript. Ваше выражение эквивалентно
$scope.removed_ + $scope.product.product_id == 'added'.